fix(rating): fix keyboard navigation styles bug on Safari #34687
Conversation
| @@ -102,7 +102,7 @@ export function teardown(doc: Document): void { | |||
| function isFocusVisible(event: React.FocusEvent): boolean { | |||
| const { target } = event; | |||
| try { | |||
| return target.matches(':focus-visible'); | |||
| return target.isEqualNode(document.activeElement); | |||
There was a problem hiding this comment.
This is wrong, focus-visible !== focus
| return target.isEqualNode(document.activeElement); | |
| return target.matches(':focus-visible'); |
There was a problem hiding this comment.
true, though I believe this hook should be renamed or approached differently because current logic does not work in Safari
There was a problem hiding this comment.
because current logic does not work in Safari
Do you have a reproduction? As far as I know, it works on Safari. Be aware that how tabs work on Safari is different than on Chrome, the browser doesn't let you tab focus the same elements.
There was a problem hiding this comment.
yes, the bug is reproducible as described in the issue - the :focus-visible implementation in Safari does not work as intended, besides, it hadn't been supported until recently
I believe my solution to be a bit more bug-proof for Safari and other browsers than this one
vanyaxk
force-pushed
the
fix/safari-problems-with-keyboard-navigation
branch
from
5266938
to
bfb8436
Compare
|
This can be tested via this demo (any of the components within it): https://mui.com/material-ui/react-rating/#main-content |
|
What are the steps? Is there an existing issue open about it? |
oliviertassinari
added
status: waiting for author
|
Ugh, sorry, linked the wrong issue in description - updated the link, the problem in the issue at hand is 100% reproducible |
github-actions
bot
removed
the
status: waiting for author
michaldudak
added
the
component: rating
github-actions
bot
added
the
PR: out-of-date
This PR fixes #34194; feels a little hacky but there is no better way to do it as far as my knowledge goes