[Radio] Cannot show "focus" after radio group value changed

[JakeNg55555]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/practical-nobel-w2rm4z?file=/Demo.tsx

Steps:

1. test the result without any value change, the radio can be focus on every 3 seconds separately (including gray circle if the radio wasn't select
2. refresh the page, change the value (e.g. Other > Male) in first 2 second and leave focus to check the result

Current behavior 😯

The Group Label can highlight 'i.e. Gender'
however, the radios cannot show the "focus" circles

Expected behavior 🤔

expect step 2 should be same as step 1

Context 🔦

in our use case, we want tell the radioGroup to do focus (actually should be the selected one) under some condition, however, it cannot be achieve after any value changed inside the group

Your environment 🌎

you may refer to codesandbox to check the environment, we fork it directly from one of the mui demo page

[mj12albert]

we want tell the radioGroup to do focus (actually should be the selected one) under some condition

@JakeNg55555 Do you think you could update the sandbox to give some examples of these conditions?
I can see what you are trying to show in the repro with setTimeout, but I'm not sure what we could do without knowing more about your use-case first ~

[JakeNg55555]

we want tell the radioGroup to do focus (actually should be the selected one) under some condition

@JakeNg55555 Do you think you could update the sandbox to give some examples of these conditions? I can see what you are trying to show in the repro with setTimeout, but I'm not sure what we could do without knowing more about your use-case first ~

@mj12albert we have forked another version
https://codesandbox.io/s/ancient-hill-2c7l4c?file=/Demo.tsx

we haven't place all the things in the context, just consider there is a text box and input a human name, if it is empty, gender must select as "Other"
in codesandbox, you can aware there is a grey default focus on "Other" ( this is why we use setTimeout to simulate the expected focus behavior, same as previous sandbox), and we expect have same result for below action:
When we click submit button,
line 26: myRef3.current.focus(); triggered, "Other" is focused actually, but there is no eye-catching change to let our user know it was focused on "Other"

[michaldudak]

This behavior is consistent with the native radio inputs and is expected.
The grey/blue outline is the focus-visible style. Once you use a mouse to select a radio button, the browser does not apply focus-visible styles, but only the focus styles.
Try using a keyboard (up or down arrow) to select another radio button - the outline would still be applied.

If you wish to style the focus state, you can add your own CSS. For example:

.MuiRadio-root:focus-within {
  /* your styles */
}