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] autoHighlight doesn't highlight on keypress following a "clear" #19251

Closed
2 tasks done
aisamu opened this issue Jan 15, 2020 · 4 comments
Closed
2 tasks done
Labels
component: autocomplete This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists

Comments

@aisamu
Copy link
Contributor

aisamu commented Jan 15, 2020

  • 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 😯

autoHighlight doesn't highlight the first item after clearing the query (either via mouse or keyboard):

Clearing with the mouse

Clearing with the Keyboard

Expected Behavior 🤔

First item should be highlighted

Steps to Reproduce 🕹

Steps:

  1. Visit https://codesandbox.io/s/material-demo-hubij (First example of the demo page with autoHighlight enabled)
  2. Click on the component to open the drop-down
  3. Type a query, clear it (esc or ✖️), then proceed with the query

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 & 4.8.3
@material-ui/lab 4.0.0-alpha.38 & alpha.39
React 16.12.0
Browser Safari 13 (❌), Chrome 79 (❌) , Firefox 72(❌)
@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work duplicate This issue or pull request already exists and removed bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! labels Jan 15, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 17, 2020

@aisamu Thanks for opening this issue. I can reproduce the issue. The reproduction seems simple:

  • focus the input
  • close the popup
  • type one matching letter

The problem is that we try to reset the highlighted index but the listboxRef isn't open yet.
It's a duplicate of #18646. The solution proposed their solve this problem too.
It took me a bit of time to figure it out. The component is quite complex. I had forgotten about this point. If you are interested, you can submit a pull request. The main missing part is that we need is regression tests. It seems that they are 3 broken cases, so 3 new tests?

@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Jan 17, 2020
@aisamu
Copy link
Contributor Author

aisamu commented Jan 17, 2020

Just to be sure: when you say it's a duplicate you're referring to the root cause, right? (the linked issue mentions freeSolo and autoSelect set to true)

The component is quite complex [...] you can submit a pull request.

This might be unfortunately beyond my current JS-fu.
You see, I'm still struggling trying to apply the patch from #19213 😄

In any case, I'll surely try to allocate some time (and perhaps pester some knowledgeable coworkers)

Thanks for following up!

@oliviertassinari
Copy link
Member

@aisamu No pain, no gain 🙃.

You have found 3 nice issues with the Autocomplete component. I have proposed 3 solutions. If you don't have the time to look into them. It's fine, if they are important enough, a third developer might come in and carry the resolution down to a stable release. We really appreciate the quality of your bug reports, especially 3 in a row.

@aisamu
Copy link
Contributor Author

aisamu commented Jan 20, 2020

@aisamu No pain, no gain 🙃.

1 out of 3! With some faith the other two might eventually arrive as well

We really appreciate the quality of your bug reports, especially 3 in a row.

Given our lack of skills to solve it ourselves, it's really the very least we could do :)

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! duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants