remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
28.43k stars 2.4k forks source link

Multiple actions on a page browser support issue #9704

Open sebastien-comeau opened 5 days ago

sebastien-comeau commented 5 days ago

Reproduction

Here is my reproduction repository: GitHub, based on Remix's Multiple Forms example. My repo uses the latest version of Remix, and I was able to reproduce the issue in both Remix v1 and v2. The issue seems to occur with browsers that do not support the SubmitEvent: submitter property. I reproduced it with Firefox 74 since I can't install Safari on Windows.

We are aware that these are older browsers, but our application must support them to serve Canadian citizens, and it is challenging to force users to update their browsers. Safari 15.4 was released on March 14, 2022, and we believe supporting at least Safari 15 is necessary. User metrics indicate this issue also occurs with other browsers that lack submitter support, including:

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 5.21 GB / 15.69 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.81)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @remix-run/dev: ^2.10.0 => 2.10.0
    @remix-run/node: ^2.10.0 => 2.10.0
    @remix-run/react: ^2.10.0 => 2.10.0
    @remix-run/serve: ^2.10.0 => 2.10.0
    vite: ^5.1.0 => 5.3.3

Used Package Manager

npm

Expected Behavior

When a page in Remix contains multiple actions and a user submits a form, the form data should include the intent key, with the value corresponding to the intent value of the action submitter.

Actual Behavior

The actual behavior is that the intent key is not present in the form data.

brophdawg11 commented 3 days ago

We have some lightweight code that attempts to detect lack of submitter support here. Any chance you'd be willing to do some step through debugging in there to see if you can help identify where that's not working right in those cases?

There is also a more extensive polyfill available in https://github.com/jenseng/formdata-submitter-polyfill that may solve the issue for you