search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

ComboBox retains invalid option after typing and clicking enter #8170

Closed guigueb closed 3 years ago

guigueb commented 3 years ago

Title line template: ComboBox retains invalid option after typing and clicking enter

What package(s) are you using?

Detailed description

Describe in detail the issue you're having. A value can be displayed in the ComboBox that doesn't refer to a valid option.

Is this issue related to a specific component? ComboBox

What did you expect to happen? What happened instead? What would you like to see changed? Typing then hitting enter... and typing then clicking away.... should have the same result. The ComboBox selection should revert to the entry before the user started to type if no matched item is found.

Issue #6818 ComboBox doesn't support entry of Text not found in list items may be effected by this.

6818 specifically mentions enter - but enter and click away should both be taken into account.

What browser are you working in? FF/CH(Win + Mac), Safari(Mac), Edge(Win)

What version of the Carbon Design System are you using? With the latest version of Carbon, at https://react.carbondesignsystem.com/?path=/story/components-combobox--combobox

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Cognos

Steps to reproduce the issue

  1. invoke the ComboBox in CodeSandbox - https://react.carbondesignsystem.com/?path=/story/components-combobox--combobox
  2. enter "XXX" in the ComboBox input field
  3. click outside the input field (the input field reverts to what was there before you started to type)
  4. enter "YYY" in the ComboBox input field
  5. enter ENTER (the input field retains the value "YYY")

The ComboBox now looks like you selected a valid option of "YYY", but "YYY" is not a valid option.

Side note: When the ComboBox is in this state - showing an option that does not match an item - clicking on the Combobox will show the drop down list and have the previous selected item still checked. Essentially showing 'YYY' but having 'Option 1' still being the real selected item.

Please create a reduced test case in CodeSandbox You can see this easily enough via the CodeSandbox CodeSnippet above.

Additional information

https://user-images.githubusercontent.com/5973642/112207534-9f3cbd00-8bed-11eb-91a6-d706a286832a.mov

Attempted workaround

I created this CodeSandbox showing the attempt I made at addressing this issue. But is does not work, the re-setting value does not work. If anyone has any comments/suggestions how to fix this please let me know. https://codesandbox.io/s/combobox-fix-enter-kpdne

guigueb commented 3 years ago

Issue #6102 and this issue #8170 are related.

6102 talks about adding the ability to add values not in the item list

8170 talks about dis-allowing values that are not in the item list

Both are good options and should be supported. By default the ComboBox should only allow items that can be found in the list. An additional prop (?allowUnmatchedItems?) would allow users to type in and retain a value that does not match an item.

The caveat for retaining a value is the need for validation to ensure the retained value is good.

Further along the lines of what the user can type in...., we should have a way to always validate what is typed in. ie: if the drop down values are all integers - there should be some way to limit the user input to integers.

guigueb commented 3 years ago

I created this CodeSandbox showing the attempt I made at addressing this issue. But is does not work, the re-setting value does not work. If anyone has any comments/suggestions how to fix this please let me know. https://codesandbox.io/s/combobox-fix-enter-setting-inputvalue-directly-kpdne

Eventually, I did get it to work by TOGGLING selectedItem (this is a hokey fix). The down side is selectedItem is now a controlled prop, so the client is responsible for all updates. https://codesandbox.io/s/combobox-fix-enter-toggle-selecteditem-yg1wb

I would have much preferred to use the downshift prop onStateChange but Carbon has its own onStateChange and ignores ComboBox.downshiftProps.onStateChange. I could have used stateReducer but I found the the internal state is not being triggered all the time, and I would have had to do the TOGGLE anyway so it wouldn't have saved me from the hokeyness.

I logged feat(ComboBox) ComboBox need more/better support of downshift for better ComboBox downshift support.

camilasb commented 2 years ago

Hi! can this fix be ported to Angular as well? I really feel that showing results despite of the fact you entered something that is not in the list is pretty misleading (not sure if it's intentional). Also, after I select one of the options and then trying to filter for something that is not in the list closes the dropdown options (expected behavior). https://angular.carbondesignsystem.com/?path=/story/components-combobox--basic

https://user-images.githubusercontent.com/20360162/151611759-448721fd-ded2-47d7-ac08-7883ec705202.mov

Let me know if I should open a separate bug for this or not or how to proceed. Thanks in advance for your time!