Skip to content

feat(components): [dialog] bring clicked dialog to front#23863

Merged
btea merged 5 commits into
element-plus:devfrom
snowbitx:fix/dialog-click-to-front
Mar 24, 2026
Merged

feat(components): [dialog] bring clicked dialog to front#23863
btea merged 5 commits into
element-plus:devfrom
snowbitx:fix/dialog-click-to-front

Conversation

@snowbitx
Copy link
Copy Markdown
Contributor

@snowbitx snowbitx commented Mar 20, 2026

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

This PR adds click behavior to el-dialog to update its z-index and bring the active dialog to the front, while still respecting any user-provided z-index value.

fixed #23858

Before

After

Summary by CodeRabbit

  • Bug Fixes

    • Penetrable dialogs now move to the front when clicked, ensuring correct stacking and z-index ordering when multiple dialogs are open.
  • Tests

    • Added automated test verifying stacking and focus behavior for penetrable dialogs to prevent regressions.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 20, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 20, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fed90074-4452-4f34-9a24-d44a3bd8e630

📥 Commits

Reviewing files that changed from the base of the PR and between fc5a74b and 5b115db.

📒 Files selected for processing (1)
  • packages/components/dialog/src/use-dialog.ts

📝 Walkthrough

Walkthrough

Adds click-to-front behavior for penetrable dialogs: dialogs with modalPenetrable=true (and not modal/fullscreen) now call bringToFront() on mousedown to update z-index so the clicked dialog appears above sibling dialogs. A unit test verifies z-index reordering.

Changes

Cohort / File(s) Summary
Dialog core
packages/components/dialog/src/use-dialog.ts, packages/components/dialog/src/dialog.vue
Add penetrable computed flag and bringToFront() in useDialog; expose them to the component. Wire @mousedown on dialog content to call bringToFront. Remove previous local penetrable logic from the component.
Tests
packages/components/dialog/__tests__/dialog.test.tsx
Add test should bring the clicked penetrable dialog to front that mounts two penetrable dialogs, asserts initial z-index order, triggers mousedown, and verifies z-index reordering so the clicked dialog becomes topmost.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant User as User
    participant DialogA as Dialog A
    participant DialogB as Dialog B
    participant Z as ZIndexManager
    rect rgba(200,200,255,0.5)
    Note over DialogA,DialogB: Two penetrable dialogs rendered with overlays (z-index A < z-index B)
    end
    User->>DialogA: mousedown on content
    DialogA->>DialogA: call bringToFront()
    DialogA->>Z: request nextZIndex()
    Z-->>DialogA: new higher z-index
    DialogA->>DialogA: apply new z-index to overlay/style
    Note over DialogA,DialogB: Dialog A now has highest z-index (on top)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • btea
  • Dsaquel

Poem

🐰 I hop among overlays bright,
A tap — I spring to topmost sight,
Z-indices shuffle, ribbons spun,
The clicked one wins the sunny run,
Hooray for clicks and carrots won!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: adding a feature to bring clicked dialogs to the front by updating their z-index.
Description check ✅ Passed The description follows the template with all checkboxes marked and includes a clear explanation of the feature, a reference to issue #23858, and before/after playground links.
Linked Issues check ✅ Passed The changes fully implement the objective from issue #23858: clicking any penetrable dialog now brings it to the front by updating its z-index while respecting user-provided z-index values.
Out of Scope Changes check ✅ Passed All changes are directly related to the linked issue objective. The test, dialog component, and useDialog hook modifications solely implement the click-to-front functionality without extraneous changes.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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
Copy link
Copy Markdown

pkg-pr-new Bot commented Mar 20, 2026

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@23863
npm i https://pkg.pr.new/element-plus@23863
yarn add https://pkg.pr.new/[email protected]

commit: 5b115db

@snowbitx snowbitx marked this pull request as ready for review March 20, 2026 09:22
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 20, 2026

🧪 Playground Preview: https://element-plus.run/?pr=23863
Please comment the example via this playground if needed.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/components/dialog/__tests__/dialog.test.tsx (1)

322-348: Add an edge-case test for explicit zIndex preservation.

This test validates reordering, but it doesn’t cover the contract that user-provided z-index must not be overridden (e.g. zIndex={0}). Adding that case would harden this PR’s objective.

Suggested additional test (example)
+    test('should not override explicit z-index when clicking penetrable dialog', async () => {
+      const wrapper = mount(
+        <Dialog modelValue={true} modal={false} modalPenetrable={true} zIndex={0}>
+          fixed z-index dialog
+        </Dialog>
+      )
+      await nextTick()
+      await rAF()
+      await nextTick()
+
+      const dialog = wrapper.find('.el-dialog')
+      const overlay = wrapper.find('.el-modal-dialog')
+      const before = Number((overlay.element as HTMLElement).style.zIndex)
+
+      await dialog.trigger('mousedown')
+      await nextTick()
+
+      const after = Number((overlay.element as HTMLElement).style.zIndex)
+      expect(after).toBe(before)
+    })
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/components/dialog/__tests__/dialog.test.tsx` around lines 322 - 348,
Add a test that ensures a user-specified zIndex on a Dialog is preserved when
dialogs are re-ordered: mount two Dialogs (like in the existing test) but pass
an explicit zIndex (e.g., zIndex={0} or style with zIndex) to one of them, wait
for nextTick/rAF, capture the overlay/dialog zIndex via the existing getZIndex
helper, trigger('mousedown') on the other dialog to reorder, await nextTick, and
assert that the explicitly set dialog's zIndex has not been overridden (remains
equal to the original value) while still allowing the stacking order logic to
update other dialogs; reuse functions/methods from the test such as Dialog,
mount, nextTick, rAF, trigger('mousedown'), and getZIndex to locate where to add
this assertion.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/components/dialog/src/use-dialog.ts`:
- Around line 232-239: The bringToFront function currently treats props.zIndex
with a truthy check which ignores an explicit 0; change the guard so it tests
zIndex for null/undefined instead (e.g., use nullish coalescing or an explicit
!= null check) so that an explicit zIndex = 0 is respected and nextZIndex() is
only used when props.zIndex is truly absent; update the conditional that
references props.zIndex in bringToFront to match the nullish checks used
elsewhere in this file.

---

Nitpick comments:
In `@packages/components/dialog/__tests__/dialog.test.tsx`:
- Around line 322-348: Add a test that ensures a user-specified zIndex on a
Dialog is preserved when dialogs are re-ordered: mount two Dialogs (like in the
existing test) but pass an explicit zIndex (e.g., zIndex={0} or style with
zIndex) to one of them, wait for nextTick/rAF, capture the overlay/dialog zIndex
via the existing getZIndex helper, trigger('mousedown') on the other dialog to
reorder, await nextTick, and assert that the explicitly set dialog's zIndex has
not been overridden (remains equal to the original value) while still allowing
the stacking order logic to update other dialogs; reuse functions/methods from
the test such as Dialog, mount, nextTick, rAF, trigger('mousedown'), and
getZIndex to locate where to add this assertion.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: faed1a59-3561-4118-815a-ffa5af568bb8

📥 Commits

Reviewing files that changed from the base of the PR and between 3f105b4 and a46e09c.

📒 Files selected for processing (3)
  • packages/components/dialog/__tests__/dialog.test.tsx
  • packages/components/dialog/src/dialog.vue
  • packages/components/dialog/src/use-dialog.ts

Comment thread packages/components/dialog/src/use-dialog.ts Outdated
@btea
Copy link
Copy Markdown
Member

btea commented Mar 20, 2026

It looks like it's the same as #23861.

@rzzf
Copy link
Copy Markdown
Member

rzzf commented Mar 21, 2026

Thanks for your contribution. If you're willing, feel free to join the review for #23861.

@rzzf rzzf closed this Mar 21, 2026
@rzzf
Copy link
Copy Markdown
Member

rzzf commented Mar 23, 2026

Thanks for your contribution. If you're willing, feel free to join the review for #23861.

I'm not sure why it was closed, let's follow up on this PR again.

@rzzf rzzf reopened this Mar 23, 2026
Comment thread packages/components/dialog/src/use-dialog.ts Outdated
Copy link
Copy Markdown
Member

@rzzf rzzf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, There is only one place that can be improved.

Comment thread packages/components/dialog/src/use-dialog.ts Outdated
micaiguai

This comment was marked as outdated.

@btea btea merged commit e9bd879 into element-plus:dev Mar 24, 2026
17 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

@snowbitx Thanks for your contribution! ❤️

@element-bot element-bot mentioned this pull request Apr 10, 2026
3 tasks
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.

[Component] [dialog] el-dialog,modal-penetrable开启穿透后,多个dialog点击哪个,哪个dialog就显示在最上层

4 participants