При монтировании проверьте, нажата ли клавиша Enter / Return, и используйте эту информацию в событии onBlur.

Question

У меня есть кнопка, которую можно выделить с помощью Tab, где нажатие Enter, когда кнопка выделена, создает поле ввода. Затем это поле ввода фокусируется.

Поле ввода имеет событие keyUp, и если клавиша Enter / Return, размыть поле (и сохранить информацию, которая была помещена в поле).

Проблема:

• Tab для выбора кнопки
• Keydown Enter / Return для создания поля ввода
• Поле ввода теперь сфокусировано
• Keyup Enter / Return
• Ввод становится размытым

Мне нужно знать, была ли нажата клавиша ввода / возврата при монтировании, и остановить событие Keyup от срабатывания, если это правда.

export default function EditableLabel({
  active,
  value: valueProp,
  variant,
  ...rest
}) {
  const [returnPressedOnMount, setReturnPressedOnMount] = useState(false);
  let isReturnPressed = false;

  // Only set this listener on mount
  useEffect(() => {
    document.addEventListener('keypress', isReturnKey, false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function isReturnKey(event) {
    console.log(event.keyCode);
    if (!returnPressedOnMount && event.keyCode === 13) {
      console.log('In the return key func');
      setReturnPressedOnMount(true);
      isReturnPressed=true;
      console.log(isReturnPressed)
    }
    document.removeEventListener('keypress', isReturnKey, false);
  }

  function handleBlur(evt) {
    setIsEditing(false);
    rest.onChange && rest.onChange({ target: { value } });
    rest.onBlur && rest.onBlur(evt);
  }

  function handleKeyUp(evt) {
    console.log(returnPressedOnMount);
    console.log(isReturnPressed);
    if (evt.key === 'Enter') {
      if (!returnPressedOnMount) {
        const target = evt.target;
        setTimeout(() => target.blur(), 0);
      } else {
        setReturnPressedOnMount(false);
      }
    }
    rest.onKeyUp && rest.onKeyUp(evt);
  }

  return (
    <Input .../>
  );
}

Этот код работает, если я удерживаю клавишу Enter / Return в течение длительного времени, но если кто-то обычно нажимает клавишу (просто нажмите клавишу, не удерживая ее), состояние / переменная не обновляется в время для onKeyUp.

Как мне узнать о нажатой клавише Return при монтировании в функцию onKeyUp?