Show focus outline only when react-select is navigated to using kybd

[moloko]

So, I've got an application that requires a VERY high level of accessibility support that's currently using react-select v1 - and I'd like to upgrade it to use the latest version of react-select.

In my application, I have it set up to show a custom 'focus outline' around interactive elements - but only when the user is using the keyboard to set focus to the element - something that is possible using the :focus-visible pseudo-class

In react-select v1 I was able to do this using the following css:

.Select.is-focused > .Select-control:has(:focus-visible) {
        /* custom focus outline stuff */
}

But in react-select v5.7.4 I just can't seem to figure out how to do something similar... no matter what I try the focus outline will always appear whenever the user opens it with the mouse...

Anyone had any success with this? Or can provide any pointers?

[moloko]

It seems to be something to do with the input element that's being used within this component (which wasn't present in v1)

If I edit that and add an attribute like type='checkbox' then :focus-visible starts working as intended i.e. focus outline only shows when you tab to it not when you click on it... obviously that's not the right type to be using but it does seem that it's the input which is affecting the behavior.

I think I'll have to see if I can figure out some other method of doing this which doesn't involve :focus-visible