Skip to content

How to prevent Escape keypress from closing the modal? #62

Open
@HriBB

Description

@HriBB

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions