Skip to content

[material-ui][Autocomplete] Listbox opens and closes on click when used with limitTags #42432

@gguiceuna

Description

@gguiceuna

Steps to reproduce

Link to live example: (required)

https://stackblitz.com/edit/react-u4moum?file=Demo.tsx

Steps:

  1. Select more than 2 options
  2. 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.
Screenshot 2024-05-28 at 10 16 10 AM
Screenshot 2024-05-28 at 10 19 24 AM

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: autocompleteChanges related to the autocomplete. This includes ComboBox.type: regressionA bug, but worse, it used to behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions