-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
Description
Steps to reproduce
Link to live example: (required)
https://stackblitz.com/edit/react-u4moum?file=Demo.tsx
Steps:
- Select more than 2 options
- Focus the text / search input (with Mouse Click)
Current behavior
The Listbox containing options will briefly flash, and close itself when all of the tags (chips) are revealed.
Expected behavior
The listbox containing options should remain open.
Context
This bug only occurs when clicking the input to focus. Using the keyboard (tab) does not replicate the bug. Also, you can occasionally see the listbox flash open and then close quickly when using the mouse to focus. Additionally, it seems if you click far enough to the right in the input the bug does not occur. I've found if I'm selecting options with shorter "titles" (using demo data) it makes the bug more difficult to replicate. It feels as though clicking the input in a location where when all of the chips are revealed and a chip will exist is what causes the bug.
In the attached screen shots if I click in the red box the bug will replicate. If I click where the blue box is (which is clearly to the right of where the Pulp Fiction chip will render) the bug does not replicate.
Your environment
Using Chrome (can replicate on StackBlitz using the Limit Tags demo page with openOnFocus set to true.
npx @mui/envinfo
System:
OS: macOS 14.5
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 125.0.6422.78
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/core-downloads-tracker: 5.15.18
@mui/icons-material: ^5.14.12 => 5.14.18
@mui/lab: ^5.0.0-alpha.147 => 5.0.0-alpha.153
@mui/material: ^5.15.18 => 5.15.18
@mui/styled-engine: 5.14.18
@mui/types: 7.2.14
@mui/utils: 5.14.18
@types/react: ^17.0.62 => 17.0.71
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.3.3 => 5.3.3
Search keywords: autocomplete, openOnFocus, limitTags