Skip to content

[popover][dialog] Use click event for outside press dismissal #2275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jul 8, 2025

Closes #2272

Some reasons why this is better:

  • It improves accessibility for dialog-like elements, which can have complex content inside and this offers a native way to cancel the dismissal (instead of e.g. explicitly coding it, though that should probably be done anyway for important content)
  • Since Dialog.Trigger and Popover.Trigger both open on click, triggering the dismissal on mouseup instead of mousedown makes sense symmetrically and also ensures pressing outside to open a new dialog or popover dismisses the open one at the same time, which feels smoother

Note: this doesn't apply if focus moves outside of the dialog or popover while pressing outside, which causes it to close on mousedown still (due to the focusout event). So if you click a Select trigger, which opens on mousedown, the Popover will also close on mousedown. This is expected anyway since you don't want to the Popover and Select to be open simultaneously during the delay between down and up pointer events.

Copy link

pkg-pr-new bot commented Jul 8, 2025

vite-css-base-ui-example

npm i https://pkg.pr.new/@base-ui-components/react@2275

commit: ba1c267

@mui-bot
Copy link

mui-bot commented Jul 8, 2025

Bundle size report

Bundle Parsed Size Gzip Size
@base-ui-components/react ▼-2.05KB(-0.67%) ▼-687B(-0.70%)

Details of bundle changes

Generated by 🚫 dangerJS against ba1c267

Copy link

netlify bot commented Jul 8, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ba1c267
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/686c9f072d9203000847acac
😎 Deploy Preview https://deploy-preview-2275--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks atomiks marked this pull request as draft July 8, 2025 04:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[popover] Prevent dismissal when a user moves the cursor back over the floating element
2 participants