Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Autocomplete] Group labels hide the selection when navigating with keyboard
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Once we reach the top while scrolling up the selection’s no longer visible (and appears to be behind the group label):
Expected Behavior 🤔
Selected/hovered item should be visible
Steps to Reproduce 🕹
The issue is present on the official AutoComplete’s demo page
Steps:
- Visit https://material-ui.com/components/autocomplete/#grouped
- Click on the component to open the drop-down
- Scroll down using the keyboard (⬇️), until the group category changes from
0-9toA - Scroll up using the keyboard (⬆️) and try to select the first item from the whole list (“12 Angry Men”)
Your Environment 🌎
Whatever’s being currently used for the demo page! We’ve double checked that it also happens on our environment:
| Tech | Version |
|---|---|
| @material-ui/core | 4.7.2 |
| @material-ui/lab | 4.0.0-alpha.38 |
| React | 16.12.0 |
| Browser | Safari 13 (❌), Chrome 79 (❌) , Firefox 72(❌) |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:5 (5 by maintainers)
Top Results From Across the Web
[Autocomplete] Group labels hide the selection when ... - GitHub
Scroll down using the keyboard ( ⬇️ ), until the group category changes from 0-9 to A; Scroll up using the keyboard (...
Read more >Jquery autocomplete keyboard navigation set the Value in ...
here's the solution $("input#sm_autosearch_clubteam").autocomplete({ source: improvedSearchData, select: club_autocomplete_select, ...
Read more >Editable Combobox With List Autocomplete Example - W3C
This example illustrates the autocomplete behavior known as list autocomplete with manual selection. If the user types one or more ...
Read more >React Autocomplete component - Material UI - MUI
This state represents the value selected by the user, for instance when pressing Enter . the "input value" state with the inputValue /...
Read more >Keyboard shortcuts and autocomplete | Confluence Cloud
Turn off autocomplete · Choose your profile photo > Settings · Under Your Settings in the left hand panel, choose Editor · Choose...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It sounds like the same root issue as #19206
@netochaves I’m currently tackling this one! Would you mind giving a hand on #19251 or confirming that the proposed fix for #19213 works?