mui / mui/material-ui

[material-ui][Select] Cycle On Focus Without Having Options Open

Open
#42,539 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: select type: new feature waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Summary

When using the Select as a drop down, it would be nice to be able to cycle through the options by typing in the first letter of the options that you'd like to cycle through. Right now it's possible to do the cycle while the options are open, but once the options are closed, hitting the keys doesn't cycle it.

Examples

To test out the current behavior, you can go to https://mui.com/material-ui/react-select/#basic-select and click on the select to focus on it, then close the options selector. Then try and cycle through the options with the T key.

Here's Amazon's version of one that works as this issue states:
https://github.com/mui/material-ui/assets/10539109/81592f3e-81ed-44bf-97cf-b752e6711afa

I was cycling by just pressing the A key.

Motivation

This is a feature available on a lot of other libraries(see ChakraUI: https://v2.chakra-ui.com/docs/components/select) and just on the web in general so a similar feature on MUI would be nice.

Search keywords: cycle select

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Material UI Select basic example linked in the issue and compare keyboard behavior while the options are open versus closed. Verify how typing the first letter currently cycles options, then confirm that the same behavior works while the Select remains focused after its menu closes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.