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] Zero (0) integer key display throws #18327

Closed
OnkelTem opened this issue Nov 12, 2019 · 8 comments · Fixed by #18994
Closed

[Autocomplete] Zero (0) integer key display throws #18327

OnkelTem opened this issue Nov 12, 2019 · 8 comments · Fixed by #18994
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@OnkelTem
Copy link

OnkelTem commented Nov 12, 2019

An Autocomplete component with a list of integer values with zero, e.g. [0, 10, 20] stops displaying proper popup after selecting "0" and displays "No options" instead if getOptionLabel is used, e.g:

getOptionLabel={option => option === 0 ? "Any" : option.toString()}

Please check out this example:
https://codesandbox.io/embed/autocomplete-any-2vfmv

Steps:

  1. Click in the LEFT control
  2. Select "20" from the drop-down
  3. Click outside of the control
  4. Click in the control again and note that a) popup is opened and b) "20" is selected there
  5. Now select "Any" from the list
  6. Click outside of the control
  7. Click back in the control: no drop-down is displayed, we see only "No options"

Now do the same with the RIGHT control, where the value of ten (10) and not zero (0) is rewritten to "Any". See that this behavior is gone and you can now select any value and get drop-down properly displayed.

@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. labels Nov 12, 2019
@oliviertassinari
Copy link
Member

@OnkelTem Thank you for the bug report. It's an issue with the value 0.

What do you think of this diff? Do you want to submit a pull request? :)

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index feb69e2f2..e3634d0ce 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -208,7 +208,7 @@ export default function useAutocomplete(props) {
   const open = isOpenControlled ? openProp : openState;

   const inputValueFilter =
-    !multiple && value && inputValue === getOptionLabel(value) ? '' : inputValue;
+    !multiple && value != null && inputValue === getOptionLabel(value) ? '' : inputValue;

   let popupOpen = open;

@ssliman
Copy link
Contributor

ssliman commented Nov 12, 2019

@oliviertassinari Working on this.

@oliviertassinari
Copy link
Member

@xZliman Should we add a unit test? 🤔

@ssliman
Copy link
Contributor

ssliman commented Nov 13, 2019

@oliviertassinari Yes we can add a unit test to cover that case

@oliviertassinari
Copy link
Member

OK cool, I believe we don't test this feature at all, it would be an opportunity to cover it, with this edge case.

@oliviertassinari oliviertassinari changed the title [Autocomplete] Zero (0) integer key with custom option label breakes the popup display [Autocomplete] Zero (0) integer key display throws Nov 30, 2019
@oliviertassinari
Copy link
Member

@xZliman Did you make progress? :)

@ssliman
Copy link
Contributor

ssliman commented Dec 3, 2019

Hi @oliviertassinari, I didn't find the time to write the tests.

@eps1lon
Copy link
Member

eps1lon commented Dec 27, 2019

This particular issue seems to be fixed with the open PR: https://codesandbox.io/s/autocomplete-any-1dmwl

It's not clear to me how numbers should behave. The textbox won't display any value when selecting any value in the codesandbox. It will never be filled.

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! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants