Material-ui: [Autocomplete] Zero (0) integer key display throws

Created on 12 Nov 2019  路  8Comments  路  Source: mui-org/material-ui

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.

bug 馃悰 Autocomplete good first issue

Most helpful comment

@oliviertassinari Working on this.

All 8 comments

@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;

@oliviertassinari Working on this.

@xZliman Should we add a unit test? 馃

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

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

@xZliman Did you make progress? :)

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

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.~

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iamzhouyi picture iamzhouyi  路  3Comments

ghost picture ghost  路  3Comments

FranBran picture FranBran  路  3Comments

revskill10 picture revskill10  路  3Comments

TimoRuetten picture TimoRuetten  路  3Comments