Dropdown: always toggles ON when toggle button is clicked in FireFox or Safari on macOS

[StevenDufresne]

Description

When using the Dropdown or Dropdown Menu components, clicking the toggle button always toggles into the is-opened state in FireFox and Safari on macOS. This behaviour is different when using Chrome, where the component toggles open/closed when the button is clicked.

Step-by-step reproduction instructions

1. Use the Dropdown or DropdownMenu components as described in the documentation (https://developer.wordpress.org/block-editor/reference-guides/components/dropdown-menu/#usage-2)
2. In FireFox or Safari on macOS, click on the toggle button to open the dialog and click it again to close the dialog.
3. Note that the dialog closes but is immediately reopened.

Expected behavior

When the toggle button is clicked, the component should assume the opposite state.

Screen recording

This screen recording uses Storybook but the issue was also seen in a separate plugin.

Browser	OS	GIF
Chrome (Version 89.0.4389.82 (Official Build) (x86_64))	macOS (Catalina, 10.15.6)
FireFox 86 (64-bit)	macOS (Catalina, 10.15.6)

WordPress information

• WordPress version: (5.8-alpha-50521)
• Gutenberg version: trunk@79b576b

[stokesman]

@StevenDufresne, I've taken the liberty to expand the scope of this issue a bit. The root of it is in Dropdown which DropdownMenu composes. So fixing it in the former will fix it in the latter (as seen in #30786). Besides that, I edited it to indicate the issue is also present in Safari and only on macOS.

[annezazu]

@StevenDufresne can you confirm that this is the same problem as described in the following feedback from the sixth call for testing for the FSE Outreach Program?

When I first set a duotone filter, the popover goes away. But, after that I find it very difficult to hide the popover; It only goes away if I click outside of the toolbar.

It seems to only occur in Safari as I can't replicate in Chrome but, since this doesn't show a specific block, I wanted to be sure. Happy to open a new issue if not. Here are visuals for both Safari and Chrome:

• Chrome: https://cloudup.com/c_qJVg_SSbJ
• Safari: https://cloudup.com/cYDedrJNExY

[stokesman]

@annezazu, in the case of the Duotone button/popover, it's not strictly the same because it does not utilize the Dropdown component and it also behaves the same cross-browser. The other visuals you linked demonstrate the text alignment control which does utilize Dropdown and is an instance of this same issue.

Similar to the Duotone control there are a few other ad hoc dropdown-like components that don't toggle as they should (#27406) and I am pretty sure there is no issue for any of them. Perhaps a tracking issue for all of them would be good.