Use capture phase in useEscapeKeydown

[benoitgrelard]

Fixes #2653

[jaknas]

Hey @benoitgrelard , FYI this change introduced an issue for us, where an Ariakit's Combobox is used inside Radix-UI Dialog. Previously, I was using event.stopPropagation() in Combobox's hideOnEscape prop, which stopped the Radix-UI dialog from closing while the Combobox Popover is open.

Right now after this change to make it a capturing event listener, the same fix with event.stopPropagation stopped working.

Letting you know that this change is potentially breaking and if there's a workaround you'd suggest.

[diegohaz]

@jaknas I haven't tested this, but you could try stopping Radix from escaping when an Ariakit popup is open within it:

<Dialog.Content
  ref={ref}
  onEscapeKeyDown={(event) => {
    if (ref.current?.contains("[data-open]")) {
      event.preventDefault();
    }
  }}
>

[jaknas]

@jaknas I haven't tested this, but you could try stopping Radix from escaping when an Ariakit popup is open within it:

<Dialog.Content
  ref={ref}
  onEscapeKeyDown={(event) => {
    if (ref.current?.contains("[data-open]")) {
      event.preventDefault();
    }
  }}
>

@diegohaz Thanks for help! Unfortunately it didn't work. First, contains needs to be called with a Node. This can be solved with using querySelector first:

<Dialog.Content
  ref={ref}
  onEscapeKeyDown={(event) => {
    const element = ref.current.querySelector("[data-open]");
    if (ref.current?.contains(element)) {
      console.log("Calling preventDefault()");
      event.preventDefault();
    }
  }}
>

This seems to work when event.target (or focus) is on the combobox input, but it fails to work when event.target is on combobox option in the popover. In that case, the popover doesn't close at all – as if Ariakit internally checks the preventedDefault property? Here's a quick screencast presenting that:

combobox-dialog.mov

[SebKranz]

We're also running into this issue with the HeadlessUI-Combobox.

I'm not sure if handling escape in the capturing-phase is a good idea. From what I understand, it breaks compatibility with every component that doesn't use Radix's <DismissableLayer>.

By being a capturing listener at the root, there's basically no way for other components to intercept the event unless we manually add the onEscapeKeyDown prop to every component using <DismissableLayer> everywhere. Since the DismissableLayerContext is internal, I don't see a way to integrate third-party components into Radix's layering system.

From the discussion, it seems like this change was made to support the inverse of this use-case, under the assumption that it would be a harmless change (#2653 (comment)). Maybe it would be worth reconsidering that decision.

For anyone looking for a workaround: I decided to override the version back to 1.0.3 for now.

// package.json
{ 
  "name":  ...
  "dependencies": {
    ...
  },
  "overrides": {
    "@radix-ui/react-use-escape-keydown": "1.0.3"
  },
}

[diegohaz]

This seems to work when event.target (or focus) is on the combobox input, but it fails to work when event.target is on combobox option in the popover. In that case, the popover doesn't close at all – as if Ariakit internally checks the preventedDefault property?

Yes, Ariakit checks event.defaultPrevented, and other libraries likely do the same. It seems that Radix could benefit from something like hideOnEscape, where you can return true or false for this specific behavior instead of relying on event.preventDefault(), which is meant to prevent all side effects on cancelable events.