swup / forms-plugin Goto Github PK

I believe I've narrowed down a bizarre behavior…

There's a moment in the loading cycle where forms with the same action param as current current page path, NaN appears in the address bar (usually only a few ms, presumably corresponding to the length of the network request).

In our case, those forms redirect after submission (when successful), but in cases when they don't, and the final URI is the same as the current page, Swup ends up dumping the user down to a regular page load with /NaN as the URI.

I've combed through the source (here and the main Swup library) trying to identify where this might come up (i.e. just an odd string concatenation), but haven't found anything yet.

Opening in the event someone else has experienced the same thing, and has a recommendation… or maybe I'm just doing something wrong!

Edit: P.S. THANK YOU for Swup, it's absolutely brilliant!

• Currently, we're checking for event.metaKey to detect form submissions into a new tab
• That property is however not present on SubmitEvent
• The behavior is also not universal across browsers or operating system
• We should do some research into whether this is required and how to properly detect it

Describe the problem

• Inline form visits should either not move focus or move it to the beginning of the form

Describe the proposed solution

• Set the new visit.a11y.focus option to the form id, if present

How important is this feature to you?

• Nice to have
• Would make the life of screen-reader users a lot easier
• I cannot use swup without it

Describe the problem 🧐

I have a filter form that sometimes has empty values. This results in URLs with unnesecary empty parameters empty like for example this one:

?filter=&sort=date-asc

The filter parameter is not in use and I'd like to strip it off the URL. A quick search yields these results:

Use Case description: https://erik.joling.me/2021/02/17/remove-empty-input-values-from-url-when-submitting-an-html-form/

Describe the propsed solution 😎

Since forms plugin already submits the form via formData, maybe we could introducing stripping empty values as a feature?

Possible Solution (untested):

appendQueryParams(url: string, data: FormData): string {
	const path = url.split('?')[0];
+	for (const [name, value] of Array.from(data.entries())) {
+		if (typeof value === 'string' && value.trim() === '') data.delete(name);
+	}
	const query = new URLSearchParams(data as unknown as Record<string, string>).toString();
	return query ? `${path}?${query}` : path;
}

Source: https://stackoverflow.com/a/64029534/586823

Alternatives considered 🤔

Implement the functionality myself, without the use of forms-plugin.

This could break existing implementations, if the consumers server-side script doesn't verify if a query parameter exists, for example this would break:

$filter = $_GET['filter'];

This would still work:

$filter = $_GET['filter'] ?? null;

To be completely save, we could hide the feature behind a flag stripEmptyParams or the like. Naming suggestions?

How important is this feature to you? 🧭

Nice to have

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

• Currently only submits input and select elements

As decribed here, we need to find a way to detect if a form submission was sent to a new tab.

This behavior is natively supported by Chrome and Safari on MAC by holding down the Meta (command) key and by Edge on Windows by holding the Control (ctrl) key. There exists an extension for FireFox that makes the same thing possible.

My first idea would be to use document.visibiltyState. Opening a new tab should hide the current tab, right? I will test this out.

What did you expect? 🧐

The form should NOT open in a new tab if performing these steps

1. visit a page with a form[data-swup-form]
2. switch to another app using command+TAB
3. switch back to the browser
4. submit the form

What actually happened? 😵‍💫

The form opens in a new tab, as it still remembers the command key press from switching between the apps.

Swup and plugin versions 📝

• @swup/forms-plugin: 3.5.0

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

The behavior appears _sometimes_ (most of the time). It seems to be somewhat related to exactly _when_ the key is released after switching back to the browser.

URL to minimal reproduction 🔗

https://swup-demo-forms-temp.replit.app/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

Describe the problem 🧐

Currently, forms-plugin will always delete the cache of the target page before navigating towards it:

This makes sense for most cases (search, contact forms, ...), but in other cases the cache might actually be useful. One example where I ran into this problem is a list that can be filtered by submitting a form:

https://example.com/users
https://example.com/users?filter=foo
https://example.com/users?filter=bar&sort=baz

Describe the propsed solution 😎

I'd like to make the cache controllable via the visit object. To reproduce the current behavior, this instantiation would make sense:

- this.swup.cache.delete(action);
- this.swup.navigate(action + hash, params, { el, event });
+const cache = {
+	read: false,
+	write: true
+};
+this.swup.navigate(action + hash, { ...params, cache }, { el, event });

That way, the consumer could decide if the request should make use of the cache or not (default: no cache):

swup.hooks.on("visit:start", (visit) => {
  if (visit.trigger.el?.matches('.my-filter-form')) {
    visit.cache.read = true;
  }
});

...or simply this if all requests should be cached:

swup.hooks.on("visit:start", (visit) => {
  visit.cache.read = true;
});

Alternatives considered 🤔

Not really an alternative that comes to mind. An attribute just for this would be pretty convoluted.

How important is this feature to you? 🧭

Would make my life a lot easier

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

What did you expect? 🧐

Submitting a form twice in a row should trigger swup visits for both submissions.

What actually happened? 😵‍💫

Only the first submission triggers a swup visit, the second submission triggers a normal browser navigation. This was first reported by @madison-swell in discussion #866.

Swup and plugin versions 📝

• swup: 4.5

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

https://swup.swelldev.com.au/?s=

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

Hi,
I have an issue. would appreciate your help:
Made a custom function on the submitForm event.
It works perfectly after the content is loaded with Swup, but if I reload the page (F5) and submit the form again, it is submitting twice.
I am using the CF7 plugin on WordPress, Does SwupFormsPlugin suppose to prevent the default form action and do it separately?
trying to figure out a workaround for that...

Adding my code:

const options = {
  containers: ["#page"],
  animateHistoryBrowsing: false,
  cache: false,
	plugins: [
	    new SwupScrollPlugin({
	        animateScroll: false,
	        doScrollingRightAway: true,
	    }),
	    new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
	]  
};

const swup = new Swup(options);

init();

swup.on('contentReplaced', init);
swup.on('submitForm', formSubmit);

The custom function sending the serialized form to a third party api:

function formSubmit(event) {

        jQuery('html').addClass('is-formsubmitting');
        inputs = jQuery(event.delegateTarget).serialize();

        jQuery.ajax({
            type: 'POST',
            url: ajax_custom.ajaxurl,
            data: {
                action: "send_data_to_iplan",
                inputs: inputs
            },
            success: function (data) {
                console.log(data);
                if(!data.includes("ok") || data.indexOf("ok") <= 0){
                    $message = 'error ha accrued;
                    console.log('this is the reason the message failed:' , data);
                }
            }
        });

}

Thank you!

Describe the problem

HTML allows overriding the form action, method and target from the submit button itself. Clicking the first submit button will submit a GET request, clicking the second button will submit to /search:

<form action="/" method="POST">
  <input type="submit" formmethod="GET" value="Submit as GET">
  <input type="submit" formaction="/search" value="Submit to /search">
</form>

Describe the proposed solution

Check for the SubmitEvent's submitter property and deduce the final form behavior from there, if present.

Alternatives considered

None, really, if we want to comply to current standards

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Describe your issue:
Using symfony/ux-swup from https://github.com/symfony/ux-swup that's also uses swup/forms-plugin and can't get my form to works with swup : error pop in console and page reload like regular form.

Swup config or any additional relevant code used:

• Default configuration from symfony/ux-swup
• Demo available here : https://github.com/Err0r404/swup-demo

Generated form

<form name="contact" method="post" data-swup-form="data-swup-form">
            <div class="form-group"><label for="contact_name" class="required">Name</label><input type="text" id="contact_name" name="contact[name]" required="required" class="form-control" value="John Doe"></div>
            <div class="text-right">
                <button role="button" type="submit" class="btn btn-lg btn-primary">Send</button>
            </div>
            <input type="hidden" id="contact__token" name="contact[_token]" value="OnuzpBXVIllIVz9LFel1toXlt1ORvZo9E7a9kBNDsik">
</form>

Error in console

Uncaught TypeError: _Link.Link is not a constructor
    at FormPlugin.onFormSubmit (index.js:78)
    at HTMLDocument.<anonymous> (delegate.js:73)

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?
• Have you considered creating a demo so we can help you better?

Describe the problem

We should go ahead and implement file uploads — it's simple enough with fetch now.

Describe the proposed solution

Append attached files to the request body:

const input = document.querySelector('input[type="file"]')
const data = new FormData()
for (const file of input.files) {
  data.append(input.name, file)
}

fetch('/', { method: 'POST', body: data })

Alternatives considered

Keep recommending to use the API directly for file uploads.

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Apologies if this is incorrect and wasting your time, I'm only beginning to get to grips with both swup and this plugin!

Before loadPage occurs in swup, it looks for event.delegateTarget.getAttribute('data-swup-transition') to add to the given loadPage({options...}), which will thus either contain the given transition or null (with null being the unset state)

Decorating the target form using this plugin (marking it up as <form [...] data-swup-form data-swup-transition="search-form"> for example) however doesn't do the same thing -- the possibility of a data-swup-transition seems absent from the onFormSubmit definition. In my case, being a search form, it's a GET, but I think the problem could apply to POST too.

Ignoring that, this plugin Just Works, which is super nice, thanks for providing it!