How to enable onKeyDown?

Question

I am using the React-date-picker API. I don't get any feedback when I key down whilst the calendar is open. On Day click is working fine. However, the key-down event isn't working when key down after click on the calendar icon to open the calendar. I can't log out.

const onKeyDown = (e: React.KeyboardEvent) => { 
  e.preventDefault 
  if (e.key === 'Enter') {
    console.log('works')    
  }    
}

onKeyDown = {onKeyDown}
onDayClick = {onDayClick}

a bit of context will be helpful. Can you include a bit of the code where `onKeyDown` is being used? — Binaek Sarkar, Apr 17 '20 at 09:29

score 0 · Answer 1 · answered Apr 16 '20 at 01:27

You can trigger each event in the related place, like the keyDown event. the keyDown event for focusable elements like input, textarea or etc. like below code:

const keyDownHandler = e => {
  e.preventDefault 
  if (e.key === 'Enter') {
    console.log('Enter key is pressed')    
  }
};

~~~

<input onKeyDown={keyDownHandler} />

You should pay attention to where you assign the onKeyDown? is it focusable or not. because some elements like div don't trigger key down event. And there is a tricky way to do what you want. put a display: hidden; input in your component and trigger key down by using it.

How to enable onKeyDown?

1 Answers1