[Bug]: Escape key doesn't close dialogs after a mouse click inside it

[kieranm]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.2.0

What browser are you using?

Chrome

Reproduction repository

https://headlessui.dev/react/dialog

Describe your issue

Setup

• Open the dialog (such as the one at the top of the example page).
• Click the text inside the dialog to remove focus from the button.
• Press "escape".

Expected behaviour:
The dialog captures the escape key and closes. Even though clicking moves focus off child elements, the dialog is still open and I think users would reasonably still expect to be able to close it with the keyboard.

Actual behaviour:
The dialog doesn't capture the escape key and doesn't close.

This issue is reproducible using the example on the Headless UI site so I haven't created a codesandbox specifically for it, but please let me know if one is required.

Apologies if I'm missing some important context!

Thanks!

[crnkovic]

Same issue is happening with a Vue version.

[kieranm]

I'm not sure if this is the optimal solution, but as a workaround I've added a global event listener to the window...

export const Modal: React.FC<ModalProps> = (props: ModalProps) => {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        props.onClose && props.onClose(false)
      }
    }
    window.addEventListener("keydown", handler)
    return () => window.removeEventListener("keydown", handler)
  }, [])

 ...
}

[Lueton]

A possible (working) solution would be adding tabindex to the dialog. For example in dialog.tsx:

let propsWeControl = {
    ref: dialogRef,
    id,
    role: 'dialog',
    'aria-modal': dialogState === DialogStates.Open ? true : undefined,
    'aria-labelledby': state.titleId,
    'aria-describedby': describedby,


    tabIndex: 0, // <---- Possible fix


    onClick(event: ReactMouseEvent) {
      event.stopPropagation()
    },

    // Handle `Escape` to close
    onKeyDown(event: ReactKeyboardEvent) {
      if (event.key !== Keys.Escape) return
      if (dialogState !== DialogStates.Open) return
      if (hasNestedDialogs) return
      event.preventDefault()
      event.stopPropagation()
      close()
    },
  }

[darr1s]

My issue is similar, ESC key wont work anywhere unless I implement @kieranm solution, then

1. Once modal appear
2. I had to click anywhere, outside or inside
3. Then ESC key would work

[cubecleveland]

I am still 1 month later can not understand the solution to this issue, do i need to fork the repo and add the props to dialog....?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@dev or yarn add @headlessui/react@dev.
• npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.