[Feature Request] Prop to allow selecting highlighted item during Select onBlur event

[jharrelson]

I took a quick look at the code for the Select component and did not see this functionality, but I think it would be really handy to add an option to automatically select the currently highlighted item in a select component during the onBlur event.

Currently, the user must search for their selection and then confirm the selection using the enter key before being able to tab into the next field. This is slightly cumbersome.

[rtivital]

Sounds fine, we can do it, feel free to contribute selectOnBlur prop to Select and MultiSelect components

[porkopek]

It's already possible listening to keydown on Select or Autocomplete and in case of the key that was pressed was 'Tab', setting the value.

I do it this way

const handleKeyDow = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Tab' || e.key === 'Enter') {
      setValue(e.currentTarget.value);
     // for better UX, select the text so the user doesn't have to delete it
      e.currentTarget.setSelectionRange(0, e.currentTarget.value?.length);
    }
  };

[jharrelson]

This doesn't appear to work -- the value that is retrieved after tabbing out of the field is the text that was input (not the value of the currently selected item).

In my case I have a Select box with a predefined set of values. When the user types in the input field, the results are filtered. From here the user can use up and down keys to change their selection or tab out of the field. I'd like to preserve whichever value is currently selected.

I can look into possibly contributing a solution if this isn't resolved by someone else by the time I get around to it. :)

[rtivital]

Done, will be released in next minor version 3.6

[rtivital]

Released in 3.6.0