QForm submit with "Enter" triggers QExpansionItem's onClick method

[KasparRosin]

What happened?

The layout is the following: QExpansionItem has an QButton which opens a QForm inside a QDialog.

When submitting the form by pressing "Enter" key, Quasar will also trigger onClick inside QExpansionItem, which causes the QExpansionItem to either Open/Close depending on the previous state.

What did you expect to happen?

QExpansionItem state should not change and it's internal onClick should not be called when pressing Enter inside a QDialog.

Reproduction URL

https://codepen.io/kasparrosin/pen/NWLQbaq

How to reproduce?

1. Go to URL
2. Click on the "+" button.
3. Insert a "title"
4. Submit form by pressing "Enter"
5. Observe the QExpansionItem closing/opening.

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar), Accessibility [a11y] (quasar)

[KasparRosin]

Screencast from 03.04.2023 13:41:55.webm

Here is also an video of the issue. Let me know, if I can post any other information.

[pdanpdan]

When a dialog (or menu) is closed the element that had focus when it was opened is focused If the close is performed exactly when pressing enter the key will also be received by the newly focused element Close the dialog with a timeout

https://codepen.io/pdanpdan/pen/zYJgzeQ?editors=0010

[KasparRosin]

@pdanpdan Thanks for the quick response! The timeout helps prevent it, but it still happens. Tested with 100ms timeout, ~3/10 times the state changed.

[KasparRosin]

Seems that 150ms is the ideal timeout, 0/10 times the state changed. Would love an better solution, but this will work for now.

[pdanpdan]

Sorry, it's hard to get a solution that works in every situation If we delay the refocusing we generate other problems when you want to change focus :(