action formData not working as expected with modals.

What version of Remix are you using?

1.4.1

Steps to Reproduce

Build a multi-form route but with each form rendered in a modal pop-up. Reproduction: https://stackblitz.com/edit/github-fn9naa?file=app%2Froutes%2Finvitations.tsx

The work around is to pass an hidden input that holds the value and name of the button. Workaround: https://stackblitz.com/edit/github-fn9naa-shsnbv?file=app%2Froutes%2Finvitations.tsx

Expected Behavior

When building a form within a modal. I would expect formData to have the same shape as it would without the modal.

formData: { email: '[e-mail]', _action: 'send' }

Actual Behavior

The formData loses the value for the button.

formData: { email: '[e-mail]' }

[github-actions[bot]]

🤖 Hello there,

We just published version v1.5.0 which involves this issue. If you’d like to take it for a test run please try it out and let us know what you think!

Thanks!

[mcansh]

@rodrigofuentes, my apologies, it works in safari, but not Firefox or Chrome 😅

it does work however in all 3 if you use reloadDocument, which submits it using a document request instead of client side with javascript, so it’s something to do with our client side mutations, I’ve filed an internal ticket for this.

on a second pass, it seems that chrome nor firefox acknowledge the button name/value at all (i gave the form the id)

this seems like a browser bug (not sure which side is “correct” though)