Skip to content

[docs]: Improve controlled detached triggers demo in popover docs#4829

Open
tomasbirbe wants to merge 1 commit into
mui:masterfrom
tomasbirbe:popover-detached-triggers-demo
Open

[docs]: Improve controlled detached triggers demo in popover docs#4829
tomasbirbe wants to merge 1 commit into
mui:masterfrom
tomasbirbe:popover-detached-triggers-demo

Conversation

@tomasbirbe
Copy link
Copy Markdown

Summary

Updates the Controlled mode with multiple triggers popover demo so the detached programmatic <button> can close the popover on a second click — the behavior called out in #4466.

Clicks on that button while the popover is open are handled as an outside-press in onOpenChange, which can fight with the Base UI event. The demo now cancels that close when the press targets the programmatic button, then closes via onClick instead. Icon triggers via Popover.Trigger keep working as before.

Docs-only; no library changes.

Changes

  • Tailwind & CSS Modules (detached-triggers-controlled): toggle open on the programmatic button (setOpen(false) when already open).
  • onOpenChange: if the close reason is outside-press and the event target is inside the programmatic button, call eventDetails.cancel() so onClick can close without conflicting state updates.
  • Short inline comments explaining the outside-press / cancel() pattern for copy-paste from the docs.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 17, 2026

commit: 31aae15

@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented May 17, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,103.65 ms ▼-342.26 ms(-23.7%) | Renders: 50 (+0) | Paint: 1,678.78 ms ▼-510.07 ms(-23.3%)

Test Duration Renders
Tabs mount (200 instances) 210.67 ms ▼-63.47 ms(-23.2%) 4 (+0)
Select mount (200 instances) 132.24 ms ▼-39.14 ms(-22.8%) 3 (+0)
Scroll Area mount (300 instances) 83.29 ms ▼-38.26 ms(-31.5%) 3 (+0)
Checkbox mount (500 instances) 63.59 ms ▼-36.65 ms(-36.6%) 1 (+0)
Popover mount (300 instances) 60.72 ms ▼-27.15 ms(-30.9%) 1 (+0)

…and 3 more (+4 within noise) — details


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 17, 2026

Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 31aae15
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a09e26d6f0dbf00081ae120
😎 Deploy Preview https://deploy-preview-4829--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 18, 2026
@zannager zannager added the docs Improvements or additions to the documentation. label May 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. PR: out-of-date The pull request has merge conflicts and can't be merged.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants