feat(components): [dialog] bring clicked dialog to front#23863
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds click-to-front behavior for penetrable dialogs: dialogs with Changes
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)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
commit: |
|
🧪 Playground Preview: https://element-plus.run/?pr=23863 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/dialog/__tests__/dialog.test.tsx (1)
322-348: Add an edge-case test for explicitzIndexpreservation.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
📒 Files selected for processing (3)
packages/components/dialog/__tests__/dialog.test.tsxpackages/components/dialog/src/dialog.vuepackages/components/dialog/src/use-dialog.ts
|
It looks like it's the same as #23861. |
|
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
left a comment
There was a problem hiding this comment.
LGTM, There is only one place that can be improved.
Co-authored-by: rzzf <[email protected]>
|
@snowbitx Thanks for your contribution! ❤️ |

Please make sure these boxes are checked before submitting your PR, thank you!
devbranch.This PR adds click behavior to
el-dialogto update itsz-indexand bring the active dialog to the front, while still respecting any user-providedz-indexvalue.fixed #23858
Before
After
Summary by CodeRabbit
Bug Fixes
Tests