Skip to content

[autocomplete] Caret/focus not visible when refocusing after blur #47244

@vrachuri28

Description

@vrachuri28

Steps to reproduce

Steps:

  1. Open this live example: https://stackblitz.com/edit/github-tuzwikp?file=src%2FApp.tsx
  2. Go to the Autocomplete component and create two chips.
  3. Use the keyboard (Left Arrow) to move focus to the created chips.
  4. Click outside the component to blur it.
  5. Click back on the component to regain focus.

❗ Result: The I-beam text caret does NOT appear inside the input unless the user types or uses the keyboard first.

Current behavior

When the Autocomplete regains focus after clicking back into it, the input does not show the I-beam text cursor. The cursor appears only after typing or using a keyboard key. Also, the last focused chip is not highlighted, so the user has no visual indication of where focus is.

Expected behavior

Whenever the Autocomplete is focused, either:

• the text cursor (I-beam) should be visible in the input, OR
• the previously-focused chip should remain visibly highlighted

…so that the user always knows where focus is.

Context

This issue affects keyboard and mouse usability for Autocomplete with multiple chips.

When the component loses focus and is clicked again, the user can't see where the caret or focus is. This creates confusion, especially when navigating chips with the keyboard or editing values.

It also impacts accessibility because there is no visible focus indicator until the user types or presses a key.

The issue reproduces consistently in the official MUI demos as well, so it’s not related to project setup.

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: autocomplete focus cursor caret blur click input chip i-beam highlight

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: autocompleteChanges related to the autocomplete. This includes ComboBox.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions