[Feature Request][Dropdowns] PreserveDefaultKeypressEvent flag

[gustaveWPM]

Is your feature request related to a problem? Please describe.

Hello.

By default, pressing the ENTER key and/or the SPACE key should dispatch a click event for some tagnames (especially on <button> and <a>).

For example, the expected default behaviour on a <button> should be :

• SPACE: click
• ENTER: click

And on a <a>:

• SPACE: nothing
• ENTER: click

When we're working on vanilla code, this is the behaviour of web browsers. It is provided for-free, and no more custom logic/magic is required.

Unfortunately, this behaviour is not preserved on Dropdown items. I could do some "magic" by implementing custom functions, as suggested in the documentation. But I think that's a pain we should be able to avoid.

At the moment, if I press the SPACE key or the ENTER key when the focus is on an <a> or a <button> within a dropdown menu, it just closes, and I don't think it is the desirable behaviour in this scenario.

For example, if I go on this demo: https://next-ui-toggler-bug-demo.vercel.app/ And then click on the "Patch Notes" dropdown menu trigger button, And then press the "Tab" (or Up/Down) key to move the focus on "Dashboard" | "Discord Bot", And then press Enter, The dropdown just closes.

I would have liked this to reproduce the expected default behaviour: a click, and therefore a redirect to the corresponding page.

Describe the solution you'd like

I would like to have a PreserveDefaultKeypressEvent flag for the dropdowns items. I think this bug is because of some preventDefault calls, which should be optional.

Describe alternatives you've considered

Implementing by hand the dispatch event... Really annoying.

Screenshots or Videos

No response

Code

:arrow_right: https://github.com/gustaveWPM/next-ui-toggler-bug-demo/blob/main/src/components/layouts/navbar/NavbarDropdown.tsx

Note: a more recent implementation of this (respecting some ARIA concerns) could be find there: :arrow_right: https://github.com/gustaveWPM/dashboard_rtm/blob/main/src/components/layouts/navbar/NavbarDropdown.tsx

[jrgarciadev]

Hey @gustaveWPM could you share the dropdown implementation code?

[gustaveWPM]

Hello @jrgarciadev, thank you for your fast answer! Sorry, I forgot this important detail.

The code that contains my implementation of this dropdown can be found here :arrow_right: https://github.com/gustaveWPM/next-ui-toggler-bug-demo/blob/main/src/components/layouts/navbar/NavbarDropdown.tsx

And a more recent implementation of this (respecting some ARIA concerns) could be find there: :arrow_right: https://github.com/gustaveWPM/dashboard_rtm/blob/main/src/components/layouts/navbar/NavbarDropdown.tsx

[jrgarciadev]

Ok I see, did you try using the useRouter hook + the Dropdown Menu onAction callback?

The support for Client Side Router will be available in v2.2.0 which means that only passing the href prop to the Dropdown items will automatically dispatch the navigation.

https://react-spectrum.adobe.com/react-aria/routing.html

[gustaveWPM]

Ok I see, did you try using the useRouter hook + the Dropdown Menu onAction callback?

The support for Client Side Router will be available in v2.2.0 which means that only passing the href prop to the Dropdown items will automatically dispatch the navigation.

https://react-spectrum.adobe.com/react-aria/routing.html

Thank you for the workaround! Since this should be fixed in v2.2.0, I'd prefer to just wait. :)

However, I will give a try to some onAction/hook magic if I have a moment to experiment this.