Description
Bug report
Given a @radix-ui/react-dropdown-menu "Dropdown Menu" use case, with a similar setup than what is described in the documentation.
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
...
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button ... />
</DropdownMenu.Trigger>
<DropdownMenu.Portal container={document.body}>
<DropdownMenu.Content>
<DropdownMenu.Item
asChild
>
<div ... />
</DropdownMenu.Item>
...
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>Upon a click interaction on the Dropdown's Trigger, the Dropdown is opened & closed immediately.
Sometimes the rapid succession of the Dropdown opening & closing is visible, although in most cases, it seemingly never opens.
We are unable to reproduce this issue using keyboard interactions, which work as expected.
We are able to reproduce this issue consistently in our code base, in all (two, similar) use cases of @radix-ui/react-dropdown-menu "Dropdown Menu".
However, we are only able to reproduce this issue in very particular conditions:
- Firefox browser (my current UA:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0) - Firefox Web Extension
We are not able to reproduce on:
- any other browser (Chrome, Safari)
- any other Web Extension or Web Page context (even on Firefox)
We have been able to reproduce this issue with no visible differences between controlled & uncontrolled modes.
Upon switching from uncontrolled to controlled mode during debugging, we've noticed the onOpenChange callback is called twice upon a click interaction, confirming that the DropdownMenu is opened & closed in a very rapid succession.
Debugging further, we have observed that the DropdownMenu.Content's onInteractOutside event handler is called following the click interaction with the DropdownMenu's Trigger.
Current Behavior
The DropdownMenu, upon a click interaction on the Dropdown Trigger, opens & closes immediately in very rapid succession, only in a Firefox Web Extension context.
Expected behavior
The DropdownMenu, upon a click interaction on the Dropdown Trigger, opens & doesn't close immediately.
Reproducible example
Unable to provide at this time.
Workaround
We've been able to mitigate this issue quickly by adding the following prop to DropdownMenu.Content:
<DropdownMenu.Content
onFocusOutside={(e) => e.preventDefault()}
...
/>Per documentation:
Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.
Suggested solution
Unsure.
Additional context
See above description.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | react-dropdown-menu | 2.0.6 |
| React | n/a | 16.14.0 |
| Browser | Firefox (MV2 Web Extension) | Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0 |
| Assistive tech | n/a | n/a |
| Node | n/a | n/a |
| npm/yarn | n/a | n/a |
| Operating System | n/a | n/a |