Closed
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
Currently, when using a focused Select component, if you use the keyboard to move down the list of options and hit Tab, it will blur the menu without selecting the active option. I think the preferred default would be that if the dropdown is open, hitting Tab selects the active option in addition to closing the menu (this is what react-select does, for example).
I also don't think there is a way for a user to implement this on their own, because there's no event triggered by changing the active option in an open dropdown menu.
What does the proposed API look like?
Select the active option on tabbing by default, without any public API change.
An alternative could be exposing an onActiveOptionChange
event, so that someone could do something like:
function SelectWithTab({ value, handleChange }) {
const [active, setActive] = useState(value);
return (
<Select
value={value}
onInputKeyDown={({ keyCode }) => {
if (keyCode === 9) {
handleChange(active);
}
}}
onChange={handleChange}
onActiveOptionChange={setActive}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>
);
}