Focus-visible applying with mouse on Slider

[SofiaGR]

Hello, from what I understand, focus-visible is a class that is added only when the keyboard is used, but that does not seem to be the case for the Slider.

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

Current Behavior 😯

A box-shadow is being added when mouse/touchpad is used to interact with the slider.

Expected Behavior 🤔

No box-shadow is added when mouse/touchpad is used.

Steps to Reproduce 🕹

Steps:

1. Visit https://codesandbox.io/s/continuousslider-material-demo-forked-iop49?file=/demo.js
2. Click on the circle
3. See box-shadow that appears on click that should not appear

Context 🔦

Your Environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

I've updated the codesandbox to mark the Thumb as red when focus visible is applied, and it is applied when clicking so you are correct it is a bug - https://codesandbox.io/s/continuousslider-material-demo-forked-8bk8q?file=/demo.js

[iansjk]

Something curious that we noticed was that the .Mui-focusVisible class is only incorrectly applied upon mouse click on the slider if this it is the first element interacted with on the page.

For example, on this page: https://sanitygone.help/operators/skadi-the-corrupting-heart/
There is a SliderUnstyled being used here:

If the thumb for this slider is the first element interacted with, then it receives .Mui-focusVisible (a blue glow). But if you first click on an empty part of the screen, click on another element, or press the Tab key to focus an element, and then click on the slider thumb, the blue glow doesn't appear (which is the expected behavior).

Just thought I'd add that finding in case it helps with the debugging process!

[nanaynaomi]

Wondering if there is any update on this? Or if there is a workaround anyone can suggest? Thank you!