在按键单击时选择下拉触发器

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:

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.

Answer 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>