Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TimePicker] ClockNumber has weird focus outline on Safari

See original GitHub issue

When open a TimePicker, Safari renders weird focus outline.

I think this behavior was introduced by #26400.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Workaround

https://github.com/mui-org/material-ui/blob/a533d062df191a95478a663a9f926de4f94b3046/packages/material-ui-lab/src/ClockPicker/Clock.tsx#L270-L279

div[role="listbox"] {
  outline: none;
}

Current Behavior 😯

Chrome/Firefox

Safari

Expected Behavior 🤔

Chrome/Firefox/Safari

Steps to Reproduce 🕹

Steps:

Open https://next.material-ui.com/components/time-picker/#basic-usage.
Open TimePicker.
(If you are using Safari) Some weird focus outline appears.

Your Environment 🌎

Safari 14.1.1 (16611.2.7.1.4)
Mobile Safari (iPadOS 14.5.1)

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:13 (1 by maintainers)

Top GitHub Comments

6reactions

BC-Mcommented, Jan 11, 2022

Add following prop to TimePicker as workaround:

DialogProps={{
  PaperProps: {
    sx: { '& *:focus': { outline: 'none' } },
  },
}}

Try here: codesandbox

However, since I do not know the side effects, please use with caution!

2reactions

samanmovagharcommented, Mar 10, 2022

Yes, exactly, this is a bug for MuiPaper, after I have changed on theme default props, the bug has been fixed on Safari @markedwards

Top Results From Across the Web

css - On Safari, why is there a focus outline appearing around ...

When the dialog opens, the browser thinks that <embeddedservice-chat-header> has focus. You can see this by issuing the command document.

Safari focus outline on buttons leaves artifacts after blur - Drupal

Safari outlines take into account absolutely positioned child elements, so it winds up outlining the tooltip that appears when the button is ......

最新趨勢觀測站- chrome button focus outline的推薦與評價

Maybe it's not a bug and you thought about this already, but it seems strange that outline-none doesn't set outline-none on focus too,...

UNPKG - @copart/notes-component

node_modules/material-ui/TimePicker/ClockNumber.js",". ... [].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`\nvar FF_ITERATOR ...

Untitled

Soy libre y no me sirve ricardo arjona, Perfect face soft focus highlighter, ... Download safari 10 for windows 7, Links club apartments...