[Bug]: Dropdown Menu Doesn't Reliably Open In Safari Browser

[joannakuo]

Component

Dropdown

Package version

Fluent v8

React version

17.0.1

Environment

System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1
    Memory: 143.70 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Edge: 129.0.2792.65
    Safari: 17.4

Current Behavior

Dropdown is not reliably opening dropdown menu in Safari. It takes multiple clicks for it to open. It doesn't repro in other browsers.

Expected Behavior

Dropdown menu should reliably open after one user click in Safari.

Reproduction

https://codepen.io/jkuo/pen/MWNwmoZ

Steps to reproduce

1. Open https://codepen.io/jkuo/pen/MWNwmoZ or open export to codepen link in Fluent UI 8 Basic Dropdown implementation (https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown#fluent-ui-v9) in a Safari browser.
2. Observe it takes 3 clicks for the dropdown to open instead of opening after 1 click.

DropdownBug.mp4

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

The referenced docs are for v8. I updated the label.

[Hotell]

@joannakuo please provide valid version of v8 react package that you experiecne the issue for

this is incorrect - your issue is with React v8

provide eg 8.123.11

ty

[dmytrokirpa]

Can't reproduce it on Safari 18.0, it might be specific to Safari 17 or even Safari 17.4

Screen.Recording.2024-09-27.at.16.24.51.mov

[spmonahan]

This seems like the same as #30441

[joannakuo]

@spmonahan the bug is similar, but not the same. I tried the workaround suggested for split button and I was able to get it to work in Safari consistently. However, the props needed don't exist in the Dropdown component. Do you know if there is a similar workaround for the Dropdown component? Thank you!

[spmonahan]

@joannakuo As, sorry missed that it was a different component. That said, I think the underlying issue is the same and I can look at bringing the fix to Dropdown.

In the meantime, it sounds like Safari 18 might fix the underlying browser issue. I know bumping up to a new Safari version typically involves an OS update that you may not want to make but could you test in Safari Technology Preview and confirm whether the issue repros there or not?

(assigning to myself so I can better keep track of this)

[joannakuo]

@spmonahan thank you for the update!

[spmonahan]

Hey @joannakuo, following up since this has gotten a bit stale and I won't be able to get to it in the foreseeable future. If you still need this fix I'm happy to help with a PR.

[pmasekito]

Anyone have a fix for this? Seems realted to that previous issue I filed a while back (#34003 ) and it's still occurring, sometimes not even responsive.