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] clearOnBlur is not working #28752

Closed
2 tasks done
ghost opened this issue Oct 1, 2021 · 1 comment · Fixed by #29208
Closed
2 tasks done

[Autocomplete] clearOnBlur is not working #28752

ghost opened this issue Oct 1, 2021 · 1 comment · Fixed by #29208
Assignees
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! v5.x migration

Comments

@ghost
Copy link

ghost commented Oct 1, 2021

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

On Autocomplete with multiple enabled, clearOnBlur doesn't work as the docs say it should: "Set to false if you want to help the user resume his search."

Expected Behavior 🤔

The Autocomplete's input field should not clear on blur or option select when clearOnBlur is set to false, even when the Autocomplete component has the multiple option enabled. If the docs say that it helps the user resume his/her search, the input should not be cleared on blur, no matter the type of Autocomplete.

Steps to Reproduce 🕹

Steps:

  1. Check the demo forked from MUI 5.0 docs: https://codesandbox.io/s/tags-material-demo-forked-ccjcs
  2. Enter an input and move away from the input (click outside of the input or select an item).
  3. The input clears, even though clearOnBlur={false} is set on all three Autocompletes.

Context 🔦

I've been utilizing onInputChange, inputValue, and onChange to accomplish this behavior, but it's extremely laggy and slow because my dropdown has a lot of options. Reducing the number to only 100 using filterOptions hasn't done much to help, but the clearOnBlur would handle everything I'm manually handling in onInputChange and inputValue much more cleanly.

Your Environment 🌎

@emotion/react -- latest (11.4.1)
@emotion/styled -- latest (11.3.0)
@mui/material -- latest (5.0.2)
react -- latest (17.0.2)
react-dom -- latest (17.0.2)

Chrome 94.0.4606.61

@ghost ghost added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 1, 2021
@ghost ghost changed the title Autocomplete with multiple and clearOnBlur doesn't persist the user's input [Autocomplete] with multiple and clearOnBlur doesn't persist the user's input Oct 7, 2021
@hbjORbj
Copy link
Member

hbjORbj commented Oct 21, 2021

@wiznotwiz Thanks for the report. In fact, clearOnBlur is not working even if you are not enabling multiple prop. See https://codesandbox.io/s/migd6?file=/demo.js

The Autocomplete's input field should not clear on blur or option select when clearOnBlur is set to false

In fact, on option select, input field should not clear even if clearOnBlur is set to false.

Since it works well on v4: https://codesandbox.io/s/material-demo-forked-swu2z?file=/demo.js, this seems to be a v5 bug. I will look into it.

@hbjORbj hbjORbj changed the title [Autocomplete] with multiple and clearOnBlur doesn't persist the user's input [Autocomplete] clearOnBlur is not working Oct 21, 2021
@hbjORbj hbjORbj added component: autocomplete This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work v5.x migration and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 21, 2021
@hbjORbj hbjORbj self-assigned this Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! v5.x migration
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant