Material UI Input not detecting when enter key is pressed

Question

I am using Material UI for my React project and unable to detect when the enter key has been pressed. I have tried the following which I thought should work but still unable to detect the event, not sure what I am missing.

I have a custom MUI component

const [search, setSearch] = useState('');

const handleChange = (event) => {
 setSearch(event.target.value);
  if (event.keyCode == 13) {
    console.log('enter key was pressed');
   }
 }

<SearchBox
  value={search}
  onChange={handleChange}
  placeholder="enter your search here"
  }}
/>

`onKeyDown` - https://stackoverflow.com/questions/43384039/how-to-get-input-textfield-values-when-enter-key-is-pressed-in-react-js — Sarun UK, Nov 16 '20 at 10:07

score 6 · Accepted Answer · answered Nov 16 '20 at 10:09

According to Material UI Docs, onChange event callback is only invoked if the field value is changed

Try using onKeyPress or onKeyUp, onKeyDown events as per use case

onKeyPress={(event) => {
   if (event.keyCode === '13'){
      console.log('enter key was pressed');      
}}

score 6 · Answer 2 · answered Sep 28 '21 at 18:58

6

`keyCode` and `charCode` are Deprecated.

instead use the key method to detect the Enter key.

onKeyPress={(event) => {
  if (event.key === 'Enter')
    console.log('Enter Pressed')
}}

answered Sep 28 '21 at 18:58

Ericgit

6,089
2
42
53

score 1 · Answer 3 · answered Mar 21 '23 at 01:22

1

onkeypress event is also deprecated.

I choose to use onKeyDown instead of, like this:

onKeyDown={(event) => {
   if (event.key === 'Enter')
       console.log('Enter Pressed')
}

reference: https://www.w3schools.com/jsref/event_onkeypress.asp

answered Mar 21 '23 at 01:22

hlx

31
4

Material UI Input not detecting when enter key is pressed

3 Answers3

keyCode and charCode are Deprecated.

`keyCode` and `charCode` are Deprecated.