Skip to content

Tabbing to select active option in <Select> #26876

Closed
@veltman

Description

@veltman
  • 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>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions