How to prevent react-dates SingleDatePicker to open on focus?

Question

I'm using react-dates SingleDatePicker. The visibility of the calendar is controlled by the focused prop. When using tabs on the website, I don't want the calendar to open, I want it to open on enter key. Is there a way to achieve this? Thanks!

Answer 1

You should to control "focused" property and onFocusChange method. Also set the listener to container. For example

.....
  const [focusedInput, setFocusedInput] = useState(null);

  const handleUserKeyPress = (evt) => {
    if (evt.keyCode === 13 && !evt.shiftKey) setFocusedInput(true);
  };
....

    <div onKeyUp={handleUserKeyPress}>
      <SingleDatePicker
        focused={focusedInput} 
        onFocusChange={({ focused }) => {
          const focus = focusedInput && focused ? true : false;
          setFocusedInput(focus);
        }} 
        .....
      />
</div>
.....