-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
Description
Steps to reproduce
Steps:
- Open this live example: https://stackblitz.com/edit/github-tuzwikp?file=src%2FApp.tsx
- Go to the Autocomplete component and create two chips.
- Use the keyboard (Left Arrow) to move focus to the created chips.
- Click outside the component to blur it.
- 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