[material-ui][Autocomplete] Not possible to apply focus-visible style to autocomplete border

[bisnurana]

Steps to reproduce

Can be reproduced in provided example,
https://mui.com/material-ui/react-autocomplete/

Current behavior

There in no way to provide focus visible styling to the autocomplete sx props.
Based on the api documentation .Mui-focusVisible class is specified for applying focus-visible style however, that class is never getting applied to the component.

Expected behavior

using .Mui-focusVisible class should be possible.

Context

I would like to have different color to the autocomplete field when the use is focusing using keyboard.

Your environment

No response

Search keywords: Autocomplete

[ZeeshanTamboli]

Could you share a CodeSandbox or StackBlitz reproduction of what you're trying to achieve? I think you need to use .Mui-focused class as per the docs: https://mui.com/material-ui/api/autocomplete/#classes.

[bisnurana]

Could you share a CodeSandbox or StackBlitz reproduction of what you're trying to achieve? I think you need to use .Mui-focused class as per the docs: https://mui.com/material-ui/api/autocomplete/#classes.

Hi, here is the sandbox for it,

https://codesandbox.io/p/devbox/falling-framework-6xrcks?workspaceId=ws_HPBheDPcbiXAUFzRncUBK8

[ZeeshanTamboli]

@bisnurana Are you looking to style the Autocomplete input border differently when focused via keyboard vs. mouse? Note that .Mui-focusVisible is applied to options, not the root, when focused via keyboard, as per the docs: https://mui.com/material-ui/api/autocomplete/#autocomplete-classes-Mui-focusVisible.