[Bug]: ComboBox allowCustomValue does not allow custom values if a value has been previously selected

[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:

Screen.Recording.2024-06-25.at.14.02.13.mov

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:

Screen.Recording.2024-06-25.at.14.10.38.mov

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:

Screen.Recording.2024-06-25.at.14.02.13.mov

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Yeah, looks like this specific interaction flow wasn't specced out as part of the initial implementation, #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]

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

I agree, i think the APG example is inline with the most logical behaviour here.

[vladbalanescu]

@tay1orjones I see you self-assigned this issue a month ago. Are there any updates or any potential fixes for this one?