openui / openui/open-ui

[popover]: event propagation for the escape key

Open
#1,147 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

Right now, elements with popover dismiss with the Escape key out of the box, but do not prevent that keyboard event from reaching the DOM, and propagating up through its ancestors. Functionally, that means that popovers nested within other controls like dialogs, sidepanes, etc. would in most cases also cause those wrapping controls to close when the popover is escape-dismissed.

This is different from the established behavior of browser escape handling in existing HTML elements with popups (select, color inputs, and date inputs), where using Escape to close them does not generate a keyboard event in the DOM. That's more a side effect of those being fully browser-rendered UI, but the end result is still the same -- they can be safely closed without causing wrapping controls to also close.

While interestingly it doesn't look like the native <dialog> element closes as a result of an inner popover escape-dismissing, any higher-level custom keyboard listener that handles escape would catch it and dismiss the dialog, e.g.: https://jsfiddle.net/Lrkce325/

Most open source control libraries rely on downstream controls stopping propagation to handle multiple levels of popups. Since popover doesn't currently do this, I'm not sure if it's possible to safely use it together with any library's custom dialog component. Referring to the Open UI Dialog page, all the libraries linked in that page with live examples that I was able to test showed this exact issue.

The popover attribute is rather different from select, input type=date, and input type=color, so fully obscuring the event seems wrong here (even more so because popover could itself have nested controls that need to handle escape). My first thought was to allow the capture phase but stop propagation past the popover node (or past the trigger, if focus is there), but that's only an initial idea, I'm sure there are potential issues with that approach as well. I'm curious if other folks also see this as an important issue, and other thoughts on how to solve it.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the linked Open UI Dialog research page and the jsfiddle reproduction, then compare the described Escape behavior across popover, dialog, and other browser popups. Done would require an agreed behavior and corresponding Open UI specification update, but the issue does not identify a file or test to change.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.