focus-ring: Workaround issue on safari #5885
Conversation
* Fixes an issue with focus-ring being triggered when opening any element that has focus-ring. * Fixes an issue with focus-ring not working anymore after opening the element that has focus-ring in this case for example menu. Once opened, click on any of the items. Then click off screen. Now re-open and use the keyboard, notice how focus ring isn't working. This fix is only applied to safari as chrome works. I think it also works correctly in Firefox but I haven't tested. It's a ugly workaround but it fixes the issue I think. Bug: Issue material-components#5830
|
@asyncliz are you able to review this please? :) I tried to do the fix in a good way but found it pretty impossible (at least I'm unaware how to do this in any other way that looks nice). |
Screen.Recording.2026-02-01.at.13.34.31.movIs with the broken behaviour Screen.Recording.2026-02-01.at.13.34.11.movIs with this patch (issue fixed) |
|
Had this hack https://github.com/GerritCodeReview/gerrit/blob/master/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts#L206. The :hover check was supposed to fix it so when you first open with the mouse it didn't trigger focus-ring. But appears because of the hack, it didn't work (when I removed the hack). But it did fix the other issue. |
|
Using just hadKeyboardEvent for safari works (not the focusVisible) (I'm not sure what kind of drawbacks it is to using that or whether we can just have chrome use it as well). |
|
This works now, I'm not sure how to improve it further. But I experience the same behaviour as chrome now. I only tested using the mouse and keyboard (e.g. when mouse clicked, no focus-ring is shown, when using keyboard, it is shown now) |
1 participant
This fix is only applied to safari as chrome works. I think it also works correctly in Firefox but I haven't tested. It's a ugly workaround but it fixes the issue I think.
Bug: Issue #5830