Add user text input option to combo box component

[scottmarcella]

Summary

The current iteration of the Carbon combo box component includes selection capabilities and filtering capabilities, however, the traditional combo box component that is understood across design and development includes not only selection capabilities, but custom text input capabilities.

The traditional combo box functionality with selection and custom text input is desired. This component would allow a user to input a value that would then be saved to the specific dropdown to which it is attached.

Justification

Existing experiences that have not yet been migrated to Carbon currently implement a traditional combo box in certain flows. Keeping this consistent is ideal due to the fact that some of these existing implementations will not be moving to Carbon at the present time.

Desired UX and success metrics

This field will both allow users the option to make a dropdown selection or allow the user to enter a custom input. Upon successful submission, the custom input will be saved to the dropdown list for future selection.

"Must have" functionality

Dropdown with two options:

• Select from a list of pre-populated options
• Enter a custom value (will then be saved to list of options)

Specific timeline issues / requests

This is related to an upcoming release scheduled for September 23, 2019 so it would be great to have this ASAP.

Available extra resources

We can provide UX/Visual support/resources for this.

[designertyler]

Hi @scottmarcella could you mock this up in a flow? How would the saved inputs be removed?

[scottmarcella]

Hi @designertyler, I can certainly mock this up. I hadn't actually put any thought into how the saved inputs would be removed, but I will put something together and post back here as soon as I come up with something.

[scottmarcella]

Hello again @designertyler, I'm back with a flow/brief spec! Of course I'm open to iteration/explanation, so feel free to reach out with any questions or comments. @asudoh

GitHub Issue 3534 - 2377 Design Proposal.pdf

[designertyler]

Thanks for the mockup! It helps to understand the request.

My high-level feedback would be to separate the tasks of making a selection and editing the list of selections. The combo box component is already trying to achieve a lot and adding the save and delete function would complicate the component.

Some specific feedback that it might be too much functionality for one component:

• It's not clear what "Save and select" would do here. Save what? To what?
  The save and select visuals look like an item in the dropdown and may be interpreted as an option rather than an action.
  

• Giving the user an option to save their input takes them away from their primary task which is to input a value and complete the form. It could distract from the primary task if they weren't planning to save their option when completing the form.

• Do I have to type a value and then "save and select" for it to accept my input rather than just entering a value? If I do not want to save my value the dropdown would stay open while I finish the rest of the form unless I close it.

• Are only user-entered items able to be deleted? Would those always be at the above, below, or organized alphabetically in the list? If the list is mixed, is there any way to tell which items are default other than hovering and seeing a delete icon?

• There's no confirmation before the destructive action of deleting an item. This could be an issue since there's no way to undo or bring back the item.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[cbix]

Probably similar to #6102