<ViewTransitions /> causes error, treats <form method="post"> as <form method="get">

[thuongvux]

Astro Info

Astro                    v4.0.3
Node                     v21.2.0
System                   Linux (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/tailwind

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

No response

Describe the Bug

Enable <ViewTransitions /> causes error
Submit form <form action="/api/example" method="post"> will not work and it will treat like <form action="/api/example" method="get">
I have temporary solutions is disable <ViewTransitions /> or go back to Astro v3.6.4.

What's the expected result?

Open stackblitz link to see!

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/thuongvux/thuongvux-astro-v4.0.3-viewtransitions-issue

Participation

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

[martrapp]

Hi @thuongvux,
in 3.x you had to explicitly enable view transitions for forms:

<ViewTransitions handleForms/>

In 4.x form handling is active by default, see CHANGELOG.md entry for 4.0.0:

#9225 c421a3d17 Thanks @natemoo-re! - Removes the opt-in handleForms property for <ViewTransitions />. Form submissions are now handled by default and this property is no longer necessary. This default behavior can be disabled by setting data-astro-reload on relevant <form /> elements.

For your example:

<form action="/api/example" method="post" data-astro-reload>

[Titou325]

Hi! Stumbled across this as well. Maybe we could add a reference in https://docs.astro.build/en/recipes/build-forms/ as well to prevent this from happening?