[TimePicker] ClockNumber has weird focus outline on Safari

[watiko]

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:

1. Open https://next.material-ui.com/components/time-picker/#basic-usage.
2. Open TimePicker.
3. (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)

[ssantiacevedo]

I'm still experimenting this issue with the mud v5 release. Do you have any clue on how to fix it? Any workaround? @watiko. I tried the

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

but it doesn't work

[jacten]

I too am having this issue

[Venkateshwar-AINQA]

Any Updates on this Issue

[bc-m]

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!

[VikR1000]

What's the correct syntax for this workaround for a <DateTimePicker> component? I've tried all the variations I can think of. :)

[kwakky1]

해결 방법으로 TimePicker에 다음 소품을 추가합니다.

DialogProps = { { 
  PaperProps : { 
    sx : {  '& *:focus' : {  아웃라인 : '없음'  }  } , 
  } , 
} }

여기에서 시도하십시오: codesandbox

하지만 부작용을 모르니 주의해서 사용하세요!

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!

I get same problem in DesktopDateTimePicker

but that is not have DialogProps

how to do?

[oslikovskiy]

@bc-m
Workaround works only for MobileTimePicker!!!

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

Safari Version 15.1
This issue with TimePicker is still reproducible.
Could you please fix this?

[oslikovskiy]

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!

This issue with TimePicker is still reproducible!!!

[samanmovaghar]

If you are using DesktopTimePicker, you need to change on the theme for MuiPaper
MuiPaper: { defaultProps: { sx: { '& *:focus': { outline: 'none' } }, }, },

[markedwards]

Confirmed, thanks @samanmovaghar. So is this a bug in MuiPaper then?

[samanmovaghar]

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

[37108]

This code works TimePicker well.

<TimePicker
  {...field}
  DialogProps={{
    PaperProps: {
      sx: { "& *:focus": { outline: "none" } },
    },
  }}
  PopperProps={{
    sx: { "& *:focus": { outline: "none" } },
  }}
  renderInput={(params) => ( /** ... */)}
/>

my environment

- @mui/lab: 5.0.0-alpha.74
- @mui/material: 5.5.2
- react: 17.0.2
- Chrome: 99.0.4844.83
- Safari: 15.0