Focus ring around the thumb is visible on mouse drag

[evgenitsn]

I am using the component and I am trying to remove the focus ring around the thumb when I drag it using mouse. Basically I need to apply the default :focus-visible behaviour to the component but it doesn't work and this is reproducible in the official demo as well.

Here is a video of me struggling with that 😅:

https://user-images.githubusercontent.com/7677924/164259396-21eb8fee-fa9b-4466-97eb-8397f59fae1c.mov

I'll try to explain what's going on:

When I open the demo page for the first time and mouse drag the Thumb I got the focus ring which is something that I think it shouldn't happening. Weirdly enough if I switch to another example from the list and then come back to the Basic example and drag the thumb, the focus ring no longer appears. But it can be brought back if we tab shift tab and then mouse drag.

So something is messing with the focus state. The behaviour doesn't look consistent and it looks like a bug. I know for the :focus-visible the browsers are doing some heuristics to decide if to show the focus ring or not and I am not sure how much this is related to that.

Maybe that's a useful resource for that: https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

I can see that this has been discussed before in this PR: https://github.com/tajo/react-range/pull/57 but according to the comments there: https://github.com/tajo/react-range/pull/57#issuecomment-573199906

But on mouse interaction, we actually should not indicate the focus visually. That is what :focus-visible is for. It let's browser decide, whether the interaction is focus-visual-worthy and applies style if yes.

This is reproducible in Chrome and Firefox. Haven't tested other browsers.

[AnglimNoa]

Hi, did you have any luck with this?

[evgenitsn]

Hey, unfortunately not, we are using it the way it is right now.

[AudriusL1]

Try outline-style: none;