Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] :active pseudo-class styles not applied on option press in Firefox #265

Open
igorizviekov opened this issue Apr 3, 2024 · 1 comment
Labels
browser: Firefox bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@igorizviekov
Copy link

igorizviekov commented Apr 3, 2024

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/infallible-darkness-lzxmzr?file=%2Fsrc%2FDemo.tsx

Steps:

  1. In the Firefox browser click on Autocomplete input to reveal the options
  2. Click and hold any of the options
  3. Observe that CSS that targets :active pseudo-class is not being applied

Current behavior

CSS that targets :active pseudo-class is not being applied on Firefox like it is on Chrome or Safari

Expected behavior

When clicking on an option that has CSS that targets :active pseudo-class the styles applied on Firefox like it is on Chrome or Safari

Context

No response

Your environment

npx @mui/envinfo
System:
    OS: macOS 14.4
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.106
    Edge: Not Found
    Safari: 17.4
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/lab: ^5.0.0-alpha.145 => 5.0.0-alpha.145 
    @mui/material: ^5.14.10 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system: ^5.14.10 => 5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: 18.2.22 => 18.2.22 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^5.2.2 => 5.2.2 

Search keywords: Autocomplete, Firefox, :active

Search keywords:

@igorizviekov igorizviekov added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 3, 2024
@danilo-leal danilo-leal changed the title CSS :active pseudo-class styles not applied on Autocomplete option press in Firefox [Autocomplete] :active pseudo-class styles not applied on option press in Firefox Apr 3, 2024
@danilo-leal danilo-leal transferred this issue from mui/material-ui Apr 3, 2024
@danilo-leal danilo-leal added the component: autocomplete This is the name of the generic UI component, not the React module! label Apr 3, 2024
@michaldudak
Copy link
Member

Thanks for the report. It looks like a bug.
We are currently redesigning the API of all components, and the Autocomplete is further down the list. We'll likely be able to focus on it near Q3-Q4 this year.

@michaldudak michaldudak added bug 🐛 Something doesn't work browser: Firefox and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser: Firefox bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants