Combobox unique value & autocomplete ☂️

[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

Preview Give feedback

1. [Combobox unique value]: Research the landscape #13412
   4 of 4
   component: combobox role: design ✏️ role: dev 🤖 type: enhancement 💡 +4
   
2. [Combobox unique value]: Design spec pass 1 (design and ux) #13902
   component: combobox role: design ✏️ type: enhancement 💡 +3
   
3. [Combobox unique value]: Design spec pass 2 (dev and a11y) #13903
   component: combobox role: design ✏️ type: enhancement 💡 +3
   
4. [Combobox unique value]: Update Figma kit with unique value carbon-design-kit#688
   component: combobox kit: figma role: design ✏️ type: enhancement 💡 +4
5. [Combobox unique value]: New value dev implementation #14006
   component: combobox role: dev 🤖 type: enhancement 💡 +3
   
6. docs(Combobox): add docs for shouldFilterItem prop #13904
   status: ready to merge 🎉 +1
7. [Combobox unique value]: Update website docs with unique value carbon-website#3579
   component: combobox role: design ✏️ type: docs 📖 type: enhancement 💡 +4
   

Focus state changes

Preview Give feedback

1. [Dropdown: Combobox & Multiselect]: Update Figma kit focus states carbon-design-kit#768
   component: combobox component: dropdown component: filterable-multiselect component: multiselect kit: figma role: design ✏️ type: enhancement 💡 +7
   
2. [Dropdown: Combobox & Multiselect]: Focus state dev implementation #15698
   component: combobox component: dropdown component: multiselect role: dev 🤖 type: enhancement 💡 +5
   
3. [Dropdown: Combobox & Multiselect]: Fixing focus state dev implementation #16512
   type: enhancement 💡 +1
   
4. [Dropdown: Combobox & Multiselect]: Update website docs with focus state changes carbon-website#3935
   component: combobox component: dropdown component: multiselect role: design ✏️ type: docs 📖 type: enhancement 💡 +6
   
5. [Bug]: Update Dropdown, Combobox & Multiselect focus states #18071
   component: combobox component: dropdown component: filterable-multiselect component: multiselect role: dev 🤖 type: bug 🐛 +6
   

Refactor and Autocomplete

Preview Give feedback

1. Refactor ComboBox to use useComboBox instead of <Downshift> component #14684
   component: combobox proposal: accepted role: dev 🤖 type: enhancement 💡 +4
   

   
2. [ComboBox] Autocomplete implementation #14007
   component: combobox role: dev 🤖 type: enhancement 💡 +3
   
3. [Combobox] Update website docs with Autocomplete carbon-website#4382
   component: combobox role: design ✏️ type: docs 📖 type: enhancement 💡 +4
   

[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 #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.

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

[sstrubberg]

Auto-complete specs vs Auto-complete implementation so we know what to write about in our website docs.

@thyhmdo to surface specs for docs.