Pressing Enter triggers intent button instead of submit button

[aaronadamsCA]

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.

[edmundhung]

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 <form /> might not always work. Because you might still have buttons before you define the form element and are associated using the form attribute 😅

<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.

[ditorodev]

You can prevent this by using the button type attr. Im not sure if by default every button is of type submit but under a form context(even when pointing to it thru the form attr) they behave like a submit. Just be explicit and use type="button" for the button with no action.

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 type="button"

@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

[edmundhung]

@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>

[ditorodev]

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