Closing dialog with form method causes page fetch (reload) with View Transitions

[doseofted]

Astro Info

Astro                    v4.0.1
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When View Transitions are active in an Astro 4 project, closing a dialog using a <form method="dialog"> causes a page to be fetched again instead of closing the dialog (of course Astro 4 was just released an hour ago so I expect some bugs 🙂).

When that Astro project is deployed with Vercel, that refetch fails with HTTP error 405 (and the page content is replaced with the pathname).

What's the expected result?

Forms with a method of "dialog" should not send a network request or page navigation.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-m3pdqc?file=src%2Fpages%2Findex.astro%3AL9

Participation

• I am willing to submit a pull request for this issue.

[lilnasy]

This is a bit tricky. Closing a form[method=dialog] emits the "submit" event on the form, which is a reasonable hint that a navigation is expected.

[lilnasy]

Good first issue!

This is an opportunity for astro users to learn about how astro works by fixing a small but real bug. You can expect to get help setting up the dev environment, and understanding the project structure in #dev channel of our discord server (https://astro.build/chat). If you have already been contributing for a while, consider guiding an enthusiastic newcomer.

What's the bug?

The view transitions router makes a request even when a navigation is not supposed to happen.

What's going wrong here?

The browser-side code for view transitions listens for the "submit" event on the form. When this event fires, the router intercepts it and runs a transition instead of a normal page navigation.

In this case where the form is using the new method="dialog", the submit event would not have cause a page navigation, but the router attempts a view transition anyway, making an unnecessary request to the server.

Where do I start looking?

The part where the view transitions router intercepts the submit event on forms is here:

astro/packages/astro/components/ViewTransitions.astro

Lines 95 to 118 in 874f68c

	document.addEventListener('submit', (ev) => {
	let el = ev.target as HTMLElement;
	if (el.tagName !== 'FORM' || isReloadEl(el)) {
	return;
	}
	const form = el as HTMLFormElement;
	const submitter = ev.submitter;
	const formData = new FormData(form, submitter);
	// Use the form action, if defined, otherwise fallback to current path.
	let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
	const method = submitter?.getAttribute('formmethod') ?? form.method;
	const options: Options = { sourceElement: submitter ?? form };
	if (method === 'get') {
	const params = new URLSearchParams(formData as any);
	const url = new URL(action);
	url.search = params.toString();
	action = url.toString();
	} else {
	options.formData = formData;
	}
	ev.preventDefault();
	navigate(action, options);
	});

.