Opt out Popover close on Enter key behavior

[nirtamir2]

I have a form element inside a popover.
When I open the popover and fill out the form I tend to press Enter key in order to submit the form.
But the popover behavior catches this Enter key and closes the form instead of submitting the form.

After searching in the docs https://www.radix-ui.com/docs/primitives/components/popover#keyboard-interactions I notice this is the expected popover behavior to close on enter

I end up doing something like:

<form
      // eslint-disable-next-line @typescript-eslint/no-misused-promises
      onSubmit={handleSubmit(onSubmit)}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          e.stopPropagation();
          void handleSubmit(onSubmit)(e);
        }
      }}
    />

• Why does the popover element close with the Enter key?
• Can we opt out of this behavior?
• Should I handle it differently? What is the best practice in this case?

Thank!

[benoitgrelard]

Hi @nirtamir2,

Why does the popover element close with the Enter key?

I don't think it does. If you look at the demo on the docs, it doesn't do that.
What we are referring to is pressing enter on the trigger/close button. That will close the Popover.

If you are seeing something else, could you link up a codesandbox with your issue?

[nirtamir2]

@benoitgrelard thank you for your help.
I fixed the problem - it has nothing related to radix-ui.
If you are interested - I have a form with cancel button and submit button and the cancel button did not have a type attribute.
So when I clicked Enter key on the input - the browser clicked the cancel button it instead of the submit button so it closed the popover. I added a reproduction here codesandbox.io/s/frosty-tristan-f98fud?file=/src/App.tsx with the problem and solution (form with button without type attribute).

[benoitgrelard]

That would make sense, because button without type inside a form become type="submit".