mui / base-ui

Base UI is an open-source library of accessible, unstyled UI components for React.
https://mui.com/base-ui/
MIT License
191 stars 36 forks source link

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

Open igorizviekov opened 3 months ago

igorizviekov commented 3 months ago

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:

michaldudak commented 2 months ago

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.