-
Notifications
You must be signed in to change notification settings - Fork 86
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pressing Enter triggers intent button instead of submit button #440
Comments
I have found this behaviour documented in the HTML spec before. Basically, the browser will look for the first submit button in the DOM whenever you press enter. But be aware that putting it at the beginning of the <div>
<button form="example">The actual button triggered when enter is pressed</button>
<form id="example">
<button>Submit</button>
</form>
</div> Definitely something that should be documented as many people don't know about this. |
You can prevent this by using the button type attr. Im not sure if by default every button is of type In your case this fixed it <button
{...form.update.getButtonProps({
name: fields.foo.name,
value: '',
validated: true,
})}
type="button" <---- the fix
className="rounded-md bg-white p-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
Clear
</button> See the @edmundhung I think documentation clarification is the right thing to do here, as it is up to the programmer to define what the main submit is |
@ditorodev Your example won't work unfortunately because that's exactly how this is designed and used to achieve progressive enhancement (So the button will work even before hydration / no JS). For sure this is up to the developers whether they care about PE, but even if you didn't, you would set up an onClick handler like this: <button
type="button"
onClick={() => {
form.update({
name: fields.foo.name,
value: '',
validated: true,
})
}}
className="rounded-md bg-white p-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
Clear
</button> |
Oh did not know the API should have been used this way. I was more trying to explain why pressing Enter was triggering the form and how it could have beeb prevented. Maybe conform can do a getButtonProps({intent: "my-intent"}) API, thinking this way it will just work for most people |
Describe the bug and the expected behavior
This is less a "bug" and more an unexpected but potentially destructive behaviour.
I was surprised to discover only after implementing intent buttons that pressing the Enter key now inadvertently triggers intent buttons instead of submit buttons.
This is technically accurate, but also very unexpected. I think it's worth discussing ideas to resolve this, even if it's just with documentation.
Conform version
v1.0.0
Steps to Reproduce the Bug or Issue
https://stackblitz.com/edit/conform-intent-button-issue?file=app%2Froutes%2F_index%2Froute.tsx
What browsers are you seeing the problem on?
No response
Screenshots or Videos
No response
Additional context
At first glance this is only solvable with additional documentation, but maybe you can think of a library solution. I was wondering if
FormContext
could examine the DOM and insert an element if needed, but clearly that wouldn't work on the server.Assuming this is just about documentation, then, I think it would be good to find the smallest valid cross-browser solution and recommend it specifically. I did document one specific workaround in the StackBlitz using
<input type="submit" hidden>
at the beginning of the<form>
, but I can't speak to its effectiveness beyond the MacOS versions of Edge, Firefox, and Safari (though thankfully it works in all three, which is a good sign). Resources like Caniuse don't get down to "Enter button submits hidden input" level of detail, and I can't find any other reliable source so far.The text was updated successfully, but these errors were encountered: