Submitting a form in a dialog with Enter, reopens the dialog

[Hzunax]

Expected behavior

Submitting a form by pressing "Enter" on keyboard, while a form element is in focus, triggers a submit event on the form. If the submit handler also closes the dialog,

Actual Behavior

A submit handler is added on the form, which closes the dialog the form is in. When pressing "Enter" on keyboard, while a form element is in focus, the form will be submitted, close the dialog, but then reopen the dialog.

It seems submit is triggered on key-down, then focus is back on the invoker and on key-up, it invokes the dialog again.

Reproduction steps

https://stackblitz.com/~/github.com/Hzunax/lion-demo

Switch to branch issue-dialog-form-submit

1. Open dialog
2. Set focus on the input
3. Press "Enter" on keyboard
4. You will see the dialog invoked again

[tlouisse]

Confirmed. See https://github.com/ing-bank/lion/pull/2556

Leads for debugging:

• Only occurs with lion-button as invoker.
• Only occurs when native dialog that is used under the hood (does not occur when .config=${{_noDialogEl: true}} provided.
• problem is possibly that native dialog sets focus back to invoker. And then the keyup of LionButton is triggered, which is perceived as click: https://github.com/ing-bank/lion/blob/master/packages/ui/components/button/src/LionButton.js#L214. This creates the direct re-opening

[tlouisse]

Possible solutions:

• investigate if we can replace the dialog with popover (this should be possible today in "Safari - 2")
• make sure that LionButton only registers a click when both keydown and keyup landed on the element. Related: https://github.com/ing-bank/lion/issues/2418#issuecomment-2500143179

N.B. both of these solutions require careful regression testing