Combobox unique value ☂️

[laurenmrice]

Acceptance criteria

• Add more functionality to Combobox so it will be able to add unique values to the listbox.
• It seems that letting users set the value for the textbox is basic functionality of a combobox. https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

---

### Unique value
- [ ] https://github.com/carbon-design-system/carbon/issues/13412
- [ ] https://github.com/carbon-design-system/carbon/issues/13902
- [ ] https://github.com/carbon-design-system/carbon/issues/13903
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/688
- [ ] https://github.com/carbon-design-system/carbon/issues/14006
- [ ] https://github.com/carbon-design-system/carbon/pull/13904
- [ ] https://github.com/carbon-design-system/carbon-website/issues/3579

### Focus state changes
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/768
- [ ] https://github.com/carbon-design-system/carbon/issues/15698
- [ ] https://github.com/carbon-design-system/carbon-website/issues/3935
- [ ] https://github.com/carbon-design-system/carbon/issues/16512

### Refactor and Autocomplete
- [ ] https://github.com/carbon-design-system/carbon/issues/14684
- [ ] https://github.com/carbon-design-system/carbon/issues/14007

[cbix]

I do need this option for a project, would be great to see an implementation! Currently it works really inconsistently:

• when unique text is entered and Enter is pressed with focus on the combo box, it becomes the input value
• focusing another input doesn't clear the custom value
• when clicking outside while the combo box is focused, a custom value gets cleared

Demo:

[dpklahn]

The work my team is doing would greatly benefit from this functionality as well. We'd like to allow the user to type in their own credentials OR select from a list of saved (and encrypted) credentials.

We'd also like to indicate when a selection has been made vs user input. In the example below we proposed an icon next to component when a selection is made, but it would be great to have a built in "state" for the two options.

Combo box.pdf

[guigueb]

Issue carbon-design-system/carbon#6102 and this issue carbon-design-system/carbon#8170 are related. carbon-design-system/carbon#6102 talks about adding the ability to add values not in the item list carbon-design-system/carbon#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.

[godivareisen]

The DataStage team would benefit from being able to add unique input values via the combo-box. We have many cases where users have to specify what specific date format to use, and we cannot include every possible date format in the dropdown list. Ideally, we would be able to list commonly used date formats in the dropdown, but users would be able to enter other date formats that aren't part of the default list.

[grahamharper]

+1 for this. We required this functionality for a time input control where the user could pick from a list of times or enter a custom time value. We had to copy the component and add the feature in our codebase temporarily to meet a delivery date. Ideally the combobox would support this as it's expected functionality.

[guigueb]

I did this by...

• wrapping the Carbon ComboBox
• adding a reserved/hidden 0th location item to the items list
• intercepted the input, enter, and click away events to select an existing item or populate and select the 0th item

Something that would make this (and other free form find/search components) better, is to set the TYPE of input. ie:

• if the combobox values are only numbers then you should only be able to type in numbers in the input
• if the combobox values are only times then you should only be able to type in times in the input

[grahamharper]

@guigueb is your code available to share?

[ConradSchmidt]

What about this solution?

const [items, setItems] = useState(values);
return <ComboBox
    titleText="Column"
    items={items}
    onInput={e => setItems(e.target.value ? [...values, e.target.value] : values)}
    />

It always adds (non-empty) inputs at the end of the dropdown and selects it if no other is matching

("Other" and "Misc" are not part of the values)

[tay1orjones]

I don't see that the (newly updated!) wai-aria guidance site shows an example of this anymore. https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#examples

Is this still a valid pattern under the combobox and listbox roles?

[sstrubberg]

[sstrubberg]

From Gower: I think that is more a sign of what they’re focusing on than that it isn’t supported. If you have a look at the preamble, you’ll see them talk about select-only versus editable, and then different kinds of editable as well. https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

[sstrubberg]

To everyone watching this issue, we will be doing some research in the next couple of sprints to inform the design spec and implementation. If there are any examples of this enhancement in the PAL community, please chime in with examples.