0

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:

  1. go to https://material-ui.com/components/selects/
  2. Open any of the dropdowns
  3. Press key T
  4. The option Ten automatically gets selected.
amanagg1204
  • 92
  • 7
  • Have you read [ask] and [mcve]? – Calvin Nunes Feb 26 '20 at 16:02
  • @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 Feb 26 '20 at 16:05
  • I don't think you can avoid this, maybe this can be helpful: https://stackoverflow.com/questions/19183715/keydown-event-in-drop-down-list – Calvin Nunes Feb 26 '20 at 16:18

1 Answers1

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>
hardik agarwal
  • 47
  • 1
  • 3