Select dropdown trigger on key click

Question

I am working on react and I am using Select component provided by the material. (https://material-ui.com/components/selects/). Upon opening the dropdown, if I press a key and there is an option that starts with that key, the corresponding option is automatically selected. This is true for normal HTML select element too. For Example - If available options are Mike, Robert, Julie, Casie and after opening dropdown I press key R on my keyboard, the selection jumps to Robert automatically Is there any way I can prevent this behavior? I tried to add onKeyPress event to Select component but it is not getting fired.

Steps to reproduce:

go to https://material-ui.com/components/selects/
Open any of the dropdowns
Press key T
The option Ten automatically gets selected.

@CalvinNunes Added link to reproduce. This isn't a bug but something to do with how select dropdown has been implemented. Unfortunately in my case, I can't find a way to prevent this. — amanagg1204
– amanagg1204, Commented Feb 26, 2020 at 16:05
I don't think you can avoid this, maybe this can be helpful: stackoverflow.com/questions/19183715/… — Calvin Nunes
– Calvin Nunes, Commented Feb 26, 2020 at 16:18

hardik agarwal · Accepted Answer · 2020-02-26 16:57:44Z

1

You can stop the event propagation from the <MenuItem> as follows

 <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onKeyDown={e => e.stopPropagation()}
          onChange={handleChange}
        >
          <MenuItem   onKeyDown={e => e.stopPropagation()} value={10}>Ten</MenuItem>
          <MenuItem  onKeyDown={e => e.stopPropagation()} value={20}>Twenty</MenuItem>
          <MenuItem  onKeyDown={e => e.stopPropagation()} value={30}>Thirty</MenuItem>
</Select>

answered Feb 26, 2020 at 16:57

hardik agarwal

471 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select dropdown trigger on key click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related