[Bug]: Primary or Default button split requires multiple clicks on Safari browser

[pmasekito]

Library

React / v8 (@fluentui/react)

System Info

System:
OS: macOS 13.0.1
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Memory: 184.18 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh

Browsers:
Safari: 16.4

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/pmasekito/pen/vYPdqBg

Bug Description

Actual Behavior

On Safari, dropdown button takes multiple clicks to get selection displaying.

Expected Behavior

Should only take one click like other browsers.

Logs

None

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[vicheanath]

I saw in the document didn't have the case button split was disabled only on the button path when it disable it should be disabled all . https://react.fluentui.dev/?path=/docs/components-button-splitbutton--default#disabled

[spmonahan]

Some notes:

1. In the default Codepen view (with the editor) I'm able to repro the issue
2. When I fork the pen and open in debug view I'm not able to repro the issue and the dropdown works as expected
3. When I fork the pen and open in full view I'm able to repro the issue again.

Safari Version 17.4 (18618.1.15.111.5, 18618) macOS 13.6.5

[pmasekito]

Is there any updates on this? :)

[khmakoto]

Hi @pmasekito, @spmonahan and I debugged this issue quite a lot during the past week and we have come to the conclusion that this is probably a bug in webkit that happens whenever you put a SplitButton inside of an iframe. We have filed a bug in webkit since we weren't able to reproduce anywhere outside of Safari.

As a workaround, in case you really need to use a SplitButton within an iframe, we've found that setting both persistMenu and renderPersistedMenuHiddenOnMount to true makes the issue go away.

I hope the workaround helps you get unblocked and let us know if there's anything else we can do to help.

[pmasekito]

I'll see if this work around works for our use case! Ty I'll keep you updated.

[khmakoto]

@pmasekito cool, I'll close the issue for now, but let me know if you need anything else.

[pmasekito]

@khmakoto the same issue occurs for the <IconButton /> component with the library, is this the same issue with webkit? It occurs for both chrome and safari (it's wishy washy). I tried that work around and it works for the Buttons but not IconButton

[khmakoto]

@pmasekito I haven't been able to repro on Chrome, do you have a repro for it? And also, can you share a repro for IconButton?

[pmasekito]

@khmakoto if you go to the fluent ui docs for CommandBar https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar

and on Safari, if you export any of the examples to codepen, and try to click the command bar buttons (some of them iconbuttons i think?), they require 3+ clicks to get the dropdown to display.