Description
Steps to reproduce
-
Use an Android device to open this link to a live example: https://react-tkbu89tn.stackblitz.io
-
Tap on the Autocomplete input.
-
Select a very long option from the list.
-
Observe that after selection, the Card (or scrollable container) jumps to the right unexpectedly.
Current behavior
When using Autocomplete inside a horizontally scrollable container (like a Card with overflow-x: auto), selecting an option that has a long label causes the container to jump/scroll horizontally, even though the TextField has a fixed width and is styled correctly (overflow: hidden, text-overflow: ellipsis).
As a result, the user experience feels broken: after selecting an option, the view suddenly shifts, and part of the content may get hidden off-screen.
This behavior happens only on Android devices.
Link to StackBlitz: https://stackblitz.com/edit/react-tkbu89tn?file=Demo.js
Expected behavior
- The selected value should appear inside the input field.
- The input field should remain in the same visual position after selection.
- No horizontal scroll or view jump should happen automatically (as it correctly behaves on non-Android devices).
Context
No response
Your environment
Search keywords: component: autocomplete