search

jquense / react-widgets

Polished, feature rich, accessible form inputs built with React
http://jquense.github.io/react-widgets/
MIT License
2.34k stars 395 forks source link

Multiselect doesn't create the typed name #831

Closed texels closed 6 years ago

texels commented 6 years ago

Going to the demo page for Multiselect and typing 'aaa' into the first example field and pressing return should result in in 'aaa' being added, but it looks like maybe the focused list element gets added instead.

image

result: image

mowsmith commented 6 years ago

Any information on this? I think I might have a related problem.

My data array is dynamically generated and when I fill out the value to get only one match, and I select it with enter, I don't get that one remaining value. It seems like it remains focused on the first value it matched when the data array was created.

It's for zips, so typing 40241 selects 40003 even though it's not in the data array anymore. The same happens when typing 402 and hitting enter which has multiple matches.

It seems to not be focusing on the top element of the dropdown.

Hitting down to select the first item and then hitting enter works just fine, but not everyone is doing that in the app.

Thank you!

EDIT:

Looking in the React devtools, it looks like the focusedItem remains even after clearing the seach, so I can hit enter with nothing in the search, and I still get 40003 after typing 4 and then removing it.

FINAL EDIT:

Looking at the code for Multiselect, I saw that focusedItem is controlled in part by whether the value prop changes. So, I've fixed my problem by cloning the value before I pass it in, which means it is always considered changed. Not sure if this is proper or the most efficient, but it's working great for me.

jquense commented 6 years ago

Definitely a bug!