Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] Scrolls page instead of listbox when software keyboard is open #45229

Open
ayush1937 opened this issue Feb 6, 2025 · 6 comments
Assignees
Labels
component: autocomplete This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@ayush1937
Copy link

ayush1937 commented Feb 6, 2025

MUI.AutoComplete.mp4

Steps to reproduce

  1. Go to "https://mui.com/material-ui/react-autocomplete/"
  2. Open the AutoComplete component on a mobile device (Not on simulator).
  3. Tap on the input field to bring up the keyboard.
  4. Attempt to scroll through the options list that appears.

Current behavior

The options list is intermittently scrollable when the keyboard is active. In some instances, users can scroll through the options without issue, while in others, it becomes completely unresponsive to scrolling gestures.

Expected behavior

The options list should remain scrollable even when the keyboard is open, allowing users to navigate through all available options easily.

Context

No response

Your environment

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

Search keywords: Autocomplete Scrolling

@ayush1937 ayush1937 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 6, 2025
@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Feb 6, 2025
@mj12albert
Copy link
Member

@ayush1937 What device/browser are you using?
I assume you can repro this with the first demo, could you maybe provide a screen recording?

@mj12albert mj12albert added status: waiting for author Issue with insufficient information package: material-ui Specific to @mui/material and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 6, 2025
@ayush1937
Copy link
Author

Brower:- Google Chrome (Application Version:- 132.0.6834.163)
Mobile Device:- OnePlus Nord CE 3 Lite 5G (Version OxygenOS 14.0)

Screen recording: https://drive.google.com/drive/folders/1yBqgLU8sGFLduEEzUG3DHfKqbxzF0jUH?usp=sharing

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Feb 6, 2025
@mj12albert mj12albert changed the title Issue with Scrolling Options in MUI AutoComplete When Keyboard is Displayed. [Autocomplete] Scrolls page instead of listbox when software keyboard is open Feb 6, 2025
@DiegoAndai
Copy link
Member

I'm not able to repro on iOS:

ScreenRecording_02-06-2025.16-30-02_1.MP4

@prakhargupta1
Copy link
Member

Works fine for me on Android 15.

screen-20250207-194318.mp4.2.mp4

@DiegoAndai
Copy link
Member

Thanks @prakhargupta1!

Because we can't reproduce on our iOS or Android devices, I suspect this might be an issue with OxygenOS. @ayush1937, have you checked if there are related issues reported for that OS?

@DiegoAndai DiegoAndai added external dependency Blocked by external dependency, we can’t do anything about it status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 7, 2025
@ayush1937
Copy link
Author

I haven’t yet researched the scroll issue for Oxygen OS. However,
I have made several attempts to reproduce the issue on both iOS and Android devices.

In my testing, I found that the issue does not occur on iOS devices, but I was able to consistently reproduce it on Android. It seems that the problem arises intermittently, particularly when the scroll list from the AutoComplete component is above the keyboard without interacting with it.

To replicate the issue, I recommend trying multiple times, as it does not always appear right away. Additionally, I have recorded another video demonstrating the issue, which I believe will assist in further investigation.

The video was captured on a Poco X4 Pro running Google Chrome Version 132.0.6834.165, Android Version 13, with Xiaomi Hyper OS. You can view the video here.

https://drive.google.com/file/d/1jU9s0SwjDmRn2TFFYTf1aOHcD1SDTGZo/view?usp=sharing

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Feb 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

5 participants