Catch escape key press

[sashberd]

trafficstars

Hi, Is to possible to catch escape button press onRequestClose event? Or add options to disable tooltip close on escape button press?

[yagudaev]

I don't think it is a library features ATM, but it should be as there is a click outside.

For now, you can accomplish this by wrapping the picker so it listens to escape on mount like so:

function TippyComponent() {
  const [showPicker, setShowPicker] = useState(false)

  const picker = () => (
    <AccessiblePicker
      onEscape={() => {
        setShowPicker(false)
      }}
    />
  )

  return (
    <Tippy
      interactive={true}
      content={picker()}
      visible={showPicker}
      onClickOutside={() => setShowPicker(false)}
      {...rest}
    >
      <button onClick={handleOnClick} ref={setRef}>
        Trigger
      </button>
    </Tippy>
  )
}

const AccessiblePicker = ({ onEscape, ...props }) => {
  const escapeKeyPress = useKeyPress("Escape")
  useEffect(() => {
    onEscape()
  }, [escapeKeyPress])
  return <Picker {...props} />
}

For useKeyPress find it here: https://usehooks.com/useKeyPress/