Combo box different selection and clear behaviour

[origami-z]

Area

UI Components

The problem

Currently following is combo box behavior

• If user select any option then they have to erase complete text or most part of the text to show complete list and update option.

• If user adds some text and then move out and then focus inside it wont show the selected option and something wont show options to user(If previous entered text doesn't match with options).

The solution

It is good to have following things:

• Show all option on focus

• Show filtered selected option when user types

• Clearing filter string if no selection is made

  • If there was no selection earlier, show blank

  • If there was a selection before, clear filter string and revert to previous selection

• Clear selection if filter string is made blank by user. (done in

  salt-ds/packages/core/src/combo-box/ComboBox.tsx

  Lines 311 to 313 in e8d923c

  	if (value === "" && !multiselect) {
  	clear(event);
  	}

  )

Alternatives and examples

https://codesandbox.io/p/sandbox/react-hook-form-salt-combobox-y2nd96

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[origami-z]

cc @bhoppers2008 @joshwooding

[bhoppers2008]

On this bullet "If there was a selection before, clear filter string and revert to previous selection"... i find it unexpected that an 'Esc' key press doesn't revert to previous selection at any point (even if all characters have been removed from the field).

This bullet is very similar to bullet 4... If speed is essential than i can see a benefit. Not sure it should be default behaviour though.

[yunjungyeh]

Interaction specs are done and to be reviewed, details & links in teams group chat.
cc @origami-z @bhoppers2008 @joshwooding

1. Show all option on focus - code example as Custom Filtering
2. Show filtered selected option when user types - code to be done + a bug to be fixed: for now it's different behaviour between clicking arrow button and the input
3. Clearing filter string - code to be done
4. Clear selection if filter string is made blank by user - code done

[mark-tate]

Cortado Goal: Design to present their findings and new ticket to implement in Doppio

[mark-tate]

Cortado Goal: create tickets for each example and label "help wanted"

[mark-tate]

closing in favour of individual issues #3953, #3954, #3952