Requirement: Select with filter and custom input

[ibrahimbutt]

Hi Diego, I need a select/combobox with the following features:

• When focused but closed, pressing "a" will select the first item begining with the given letter. Pressing it repeatedly will loop over all items that begin with that letter.
• When the select/combobox is open, you are able to type as normal to filter
• When the users input does not 100% match the possible values, I want to have an item that the user can select. Example:
  • Input = Amazon
  • Item = + Payee: Amazon
  • I should be able to get the users input so I can handle creating the payee without having to extract the input portion from the item.
• I would like for the select or combo box to open when focused ( I guess this removes the first requirement), but not sure if this is a good idea.

Is there an example that fits this, or is this possible?

Context: I am creating a web app where there is a lot of manual entry, and while creating enteries, users will select from options they've used before, or create a new one on the fly. E.g. creating a transaction with a new category, without the user having to take extra steps to first create that category.

[diegohaz]

I'm not quite sure if you're referring to the Select with Combobox pattern, or a single combobox input element that can either be select-only or editable, depending on whether the popup is open.

Based on #3254 (comment), I'll assume you're referring to the Select with Combobox pattern.

• When focused but closed, pressing "a" will select the first item begining with the given letter. Pressing it repeatedly will loop over all items that begin with that letter.
• When the select/combobox is open, you are able to type as normal to filter

That's how the Select with Combobox example works by default (as long as the SelectItem elements are rendered in the DOM).

• When the users input does not 100% match the possible values, I want to have an item that the user can select. Example:

  • Input = Amazon
  • Item = + Payee: Amazon
  • I should be able to get the users input so I can handle creating the payee without having to extract the input portion from the item.

You're free to render any additional SelectItem/ComboboxItem elements inside the list:

{!matches.includes(value) && (
  <SelectItem onClick={() => addValue(value)}>
    + Payee: {value}
  </SelectItem>
)}

• I would like for the select or combo box to open when focused ( I guess this removes the first requirement), but not sure if this is a good idea.

It's possible, but this could likely lead to unnecessary complexity in logic and design decisions, with a high risk of negatively affecting the user experience.