Skip to content

Autocomplete input causes view jump when selecting a long option on Android #45939

Open
@lukagrbec

Description

@lukagrbec

Steps to reproduce

  1. Use an Android device to open this link to a live example: https://react-tkbu89tn.stackblitz.io

  2. Tap on the Autocomplete input.

  3. Select a very long option from the list.

  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: autocompleteThis is the name of the generic UI component, not the React module!external dependencyBlocked by external dependency, we can’t do anything about it

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions