fix(Dialog): scope overlay pointerdown prevention to the overlay itself by zernonia · Pull Request #2668 · unovue/reka-ui

zernonia · 2026-05-29T05:58:12Z

Summary

Fixes #2660 — a regression introduced in 2.9.8 where native <select> dropdowns won't open and <input>/<textarea> won't focus when clicked inside a <Dialog>.

Root cause

#2655 (fix(Dialog): restore focus to trigger after overlay click) added @pointerdown.left.prevent to DialogOverlayImpl so that clicking the overlay backdrop keeps focus on the trigger after the dialog closes (by skipping the browser's compatibility mousedown).

When DialogContent is nested inside DialogOverlay — a very common centering pattern, and what the reporter's reproduction uses — pointerdown events bubble up from controls inside the content to the overlay. The overlay's listener then called preventDefault() on them too, which suppresses native behaviors:

native <select> dropdowns don't open
<input> / <textarea> don't focus on click

Fix

Add the .self modifier: @pointerdown.left.self.prevent. The prevention now only applies when the pointer lands directly on the overlay backdrop (event.target === overlay), not on descendants. This preserves the #2655 behavior while leaving in-content interactions untouched.

Tests

Added a regression block in Dialog.test.ts using a dialog whose content is nested inside the overlay (reproducing the exact structure):

asserts a pointerdown on a control inside the content is not defaultPrevented
asserts the dialog stays open when pressing down on a control inside the content

Verified these tests fail on the old @pointerdown.left.prevent and pass with the .self fix. The existing overlay-click tests from #2655 still pass (they dispatch on the overlay directly). Full reka-ui suite is green.

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Fixed dialog overlay pointer event handling to properly support interactive controls nested inside dialog content, ensuring they function correctly without event interference from the overlay.
Tests
- Added regression tests to verify dialog behavior with nested interactive elements, confirming proper pointer event handling and that the dialog remains fully functional and accessible.

#2655 added `@pointerdown.left.prevent` on the overlay so focus stays on the trigger after the dialog closes. When `DialogContent` is nested inside `DialogOverlay` (a common centering pattern), that handler also fired for pointerdown events bubbling up from controls inside the content, calling `preventDefault()` on them. That suppressed native behavior — `<select>` dropdowns wouldn't open and `<input>`/`<textarea>` wouldn't focus on click. Add the `.self` modifier so the prevention only applies when the pointer lands directly on the overlay backdrop, preserving the #2655 behavior while leaving descendant interactions untouched. Fixes #2660 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-05-29T05:58:23Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aa7998e4-6c0a-411c-966d-9984cdf3f5ba

📥 Commits

Reviewing files that changed from the base of the PR and between d3df692 and 84df829.

📒 Files selected for processing (2)

packages/core/src/Dialog/Dialog.test.ts
packages/core/src/Dialog/DialogOverlayImpl.vue

📝 Walkthrough

Walkthrough

The PR fixes pointer event handling in Dialog's overlay component. The overlay handler is narrowed to prevent pointerdown only on the overlay itself using the .self modifier, not on nested interactive content. A regression test verifies that pointerdown on inputs inside DialogContent is not prevented and the dialog remains open.

Changes

Dialog overlay pointer event specificity

Layer / File(s)	Summary
Overlay left-button pointerdown handler specificity `packages/core/src/Dialog/DialogOverlayImpl.vue`	The overlay's pointerdown prevention is scoped to the overlay element itself by adding `.self` to the event modifier, changing `@pointerdown.left.prevent` to `@pointerdown.left.self.prevent`. This prevents the overlay from suppressing pointerdown events bubbling from nested interactive controls.
Nested content pointer event regression test `packages/core/src/Dialog/Dialog.test.ts`	A new test fixture (`NestedContentDialogTest`) establishes a dialog with `DialogContent` nested inside `DialogOverlay` containing an input control. A regression test verifies that pointerdown on the nested input is not prevented and the dialog does not close.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A button fix, so clean and bright,
With .self we get events just right,
Nested inputs now work with grace,
No unwanted prevention in this space!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately reflects the primary change: scoping the dialog overlay's pointerdown prevention to the overlay element itself via the `.self` modifier. It is specific, concise, and clearly communicates the fix being applied.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/dialog-select-input-2660

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-05-29T05:59:33Z

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2668

commit: 84df829

zernonia merged commit 396ba29 into v2 May 29, 2026
9 checks passed

ruchamahabal mentioned this pull request Jun 21, 2026

Dialog: mouse clicks can't focus inputs (overlay pointerdown.preventDefault suppresses mousedown) frappe/frappe-ui#766

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(Dialog): scope overlay pointerdown prevention to the overlay itself#2668

fix(Dialog): scope overlay pointerdown prevention to the overlay itself#2668
zernonia merged 1 commit into
v2from
fix/dialog-select-input-2660

zernonia commented May 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 29, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new Bot commented May 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

zernonia commented May 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root cause

Fix

Tests

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new Bot commented May 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

zernonia commented May 29, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 29, 2026 •

edited

Loading