modal icon indicating copy to clipboard operation
modal copied to clipboard

How to prevent Escape keypress from closing the modal?

Open HriBB opened this issue 1 year ago • 0 comments

I am using PayloadCMS 3.5.0, which uses this component under the hood. I have an inline editor, which can be closed by pressing Escape key

useEffect(() => {
  inputRef.current?.focus()
  inputRef.current?.select()
  const onKeydown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      e.preventDefault()
      e.stopPropagation()
      onCancel()
    }
  }

  document.addEventListener('keydown', onKeydown)
  return () => {
    document.removeEventListener('keydown', onKeydown)
  }
}, [onCancel])

And if the document is rendered inside Modal, hitting Escape when my inline editor is open, also closes the modal, even though I do e.preventDefault() and e.stopPropagation()

recording.webm

Is there any way to prevent the Escape key from closing the Modal?

HriBB avatar Dec 10 '24 22:12 HriBB