tay1orjones
commented
1 week ago Yeah, looks like this specific interaction flow wasn't specced out as part of the initial implementation, https://github.com/carbon-design-system/carbon/pull/14935.
if a value has been previously selected a user is not able to enter a new custom value
I found that you actually can, but only by pressing escape. I think it's really odd that the behavior changes after you've selected something from the list. Even further, if you put in something with no partial matches, it will still reselect the first item in the list.
I think generally this needs to be fixed so that if allowCustomValue is on, the only way to select an item in the list is by explicitly navigating down into the list and selecting it there. This matches how the APG example works
If you put in a custom value that is a partial match: pressing enter, escape, or blurring the input via clicking away or tab should not select anything in the list.
jeesonjohnson
Package
@carbon/react, carbon-components-react
Browser
Chrome
Package version
V11.60.20
React version
v16.14.0
Description
Problem
The behaviour wrt to ComboBox with custom values(
allowCustomValue=true), seems to not behave correctly on clicking outside the component, and or clicking enter, if a value has been previously selected. The user is not able to enter a new custom field, as it defaults to the previously selected element.Visual Example on storybook client:
https://github.com/carbon-design-system/carbon/assets/44068823/d3a92e27-29db-48ba-bac2-29ebd6304fe1
As is evident above, if a value has been previously selected a user is not able to enter a new custom value.
Note: There is a possibly related comment here. Which were shipped in
V11.60.20.Suggested Fix:
Note 2: Within our product, we have a wrapper for the component that looks like the below. This component gives the user a visual option to select their most recent partial match on entering values. See video below for example of this:
https://github.com/carbon-design-system/carbon/assets/44068823/ba68bdc7-eb3b-4b98-90ff-06c3e5158f0b
By implementing the allowCustomValue functionality (like the above), the user is able to enter new partial matches as well as select a full match if required.
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-combobox--allow-custom-value
Steps to reproduce
1) Select a value that is available in the dropdown 2) Enter a partial match to the drop-down value 3) Press either outside of the combo-box or press enter 4) The user is not able to select thier new custom value, but rather defaults them to the previously selected value.
See video below for a visual example:
https://github.com/carbon-design-system/carbon/assets/44068823/d3a92e27-29db-48ba-bac2-29ebd6304fe1
Suggested Severity
None
Application/PAL
No response
Code of Conduct