You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We recently replaced our own Popover component to be built on top of react-dropdown-menu instead of react-popover since the two are almost identical, but the DropdownMenu also supports Submenus which is definitely something we want.
The migration was essentially free since both of these components share the vast majority of functionality and props, with the exception of onOpenAutoFocus.
We use onOpenAutoFocus to prevent the Popover from grabbing focus in our Combobox which then uses the Input trigger's onBlur event to close the Popover.
Example:
CleanShot.2024-09-18.at.14.33.53.mp4
import * as RadixPopover from '@radix-ui/react-popover'
...
<RadixPopover.Content
onOpenAutoFocus={event => {
if (preventAutoFocus) {
event.preventDefault()
}
}}
...
>
Compared with dropdown-menu
CleanShot.2024-09-18.at.14.36.57.mp4
import * as RadixPopover from '@radix-ui/react-dropdown-menu'
...
<RadixPopover.Content
// onOpenAutoFocus not supported!
...
>
Everything else is exactly the same and fully supported without any changes anywhere in our codebase.
We were faced with a similar problem. It'd be very useful to have an onOpenAutoFocus prop
I tried forking and taking a stab at it, but it started causing some intensely buggy behaviour. I suspect the reason the prop isn't there is because managing the focus is critical to how the dropdown menu functions :(
I'll close this and open a new PR for adding a Sub item to the Popover, which might be a better solution
Feature request
Overview
We recently replaced our own
Popover
component to be built on top ofreact-dropdown-menu
instead ofreact-popover
since the two are almost identical, but theDropdownMenu
also supports Submenus which is definitely something we want.The migration was essentially free since both of these components share the vast majority of functionality and props, with the exception of
onOpenAutoFocus
.We use
onOpenAutoFocus
to prevent thePopover
from grabbing focus in ourCombobox
which then uses theInput
trigger'sonBlur
event to close thePopover
.Example:
CleanShot.2024-09-18.at.14.33.53.mp4
Compared with dropdown-menu
CleanShot.2024-09-18.at.14.36.57.mp4
Everything else is exactly the same and fully supported without any changes anywhere in our codebase.
Examples in other libraries
Radix already supports this in other "popover" style components:
https://www.radix-ui.com/primitives/docs/components/popover#content
Who does this impact? Who is this for?
It's a helpful event for managing focus that right now prevents us from using this component for our combobox.
The text was updated successfully, but these errors were encountered: