Skip to content

fix(components): [cascader] prevent duplicate root lazy-load calls#24269

Merged
btea merged 2 commits into
devfrom
fix/cascader-lazyLoad-two-call
May 18, 2026
Merged

fix(components): [cascader] prevent duplicate root lazy-load calls#24269
btea merged 2 commits into
devfrom
fix/cascader-lazyLoad-two-call

Conversation

@rzzf
Copy link
Copy Markdown
Member

@rzzf rzzf commented May 18, 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.

When lazyLoad is first triggered by the config watcher and has not yet been resolved, opening the panel will trigger lazyLoad again.

repro

Summary by CodeRabbit

  • Bug Fixes

    • Corrected cascader lazy loading behavior to prevent duplicate load requests when opening the dropdown during initial data loading.
  • Tests

    • Added test coverage to ensure cascader lazy loading functions correctly under concurrent operations.

Review Change Stack

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 18, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 18, 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: c700e5c2-dc65-44f1-92a9-8466a1e44c69

📥 Commits

Reviewing files that changed from the base of the PR and between 3525f8c and 1f154ed.

📒 Files selected for processing (1)
  • packages/components/cascader/__tests__/cascader.test.tsx

📝 Walkthrough

Walkthrough

CascaderPanel's lazy root node loading function now includes an additional guard to exit early when the initial load is not yet complete, preventing concurrent invocations. A test case validates this behavior by confirming that toggling the popper during a pending load does not re-trigger the lazy load callback.

Changes

Lazy Load Race Condition Fix

Layer / File(s) Summary
Guard condition and test validation
packages/components/cascader-panel/src/index.vue, packages/components/cascader/__tests__/cascader.test.tsx
loadLazyRootNodes now returns early when initialLoaded.value is false, in addition to the existing initialLoadedOnce.value guard. A new test verifies that toggling the cascader popper visible while the initial lazy load is pending does not trigger a duplicate lazyLoad call.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

Needs Review

Suggested reviewers

  • Dsaquel
  • btea

Poem

🐰 Locks prevent the race, no more,
Guards ensure the load's not twice,
Tests confirm the promise stays,
One call only, smooth and nice!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The pull request title clearly identifies the main issue being fixed: preventing duplicate root lazy-load calls in the cascader component.
Description check ✅ Passed The description includes the required checklist template and provides a clear explanation of the bug with a reproducible example link, though some checklist items remain unchecked.
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/cascader-lazyLoad-two-call

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 May 18, 2026

Open in StackBlitz

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

commit: 1f154ed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 18, 2026

Size Change: +16 B (0%)

Total Size: 1.44 MB

📦 View Changed
Filename Size Change
dist/element-plus/dist/index.full.js 413 kB +5 B (0%)
dist/element-plus/dist/index.full.min.js 290 kB +2 B (0%)
dist/element-plus/dist/index.full.min.mjs 282 kB +3 B (0%)
dist/element-plus/dist/index.full.mjs 404 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
dist/element-plus/dist/index.css 47.3 kB

compressed-size-action

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.

🧹 Nitpick comments (1)
packages/components/cascader-panel/__tests__/cascader-panel.test.tsx (1)

602-631: ⚡ Quick win

Well-written test that correctly validates the lazy-load race condition fix.

The test properly verifies that loadLazyRootNodes() prevents duplicate lazyLoad invocations both during the pending state and after completion. The use of fake timers and clear assertions makes the test easy to understand and maintain.

Optional enhancement: Verify loaded state after timer completion

Consider adding an assertion after line 627 to verify that the nodes were actually loaded before the final reload attempt. This would make the test more robust:

 vi.runAllTimers()
 await nextTick()
+const nodes = wrapper.findAll(NODE)
+expect(nodes.length).toBe(1)
 vm.loadLazyRootNodes()
 expect(lazyLoad).toHaveBeenCalledTimes(1)

This ensures the component reached the expected "loaded" state before testing the post-load behavior.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/components/cascader-panel/__tests__/cascader-panel.test.tsx` around
lines 602 - 631, Add a post-timer assertion to confirm the lazy nodes were
actually loaded before the final reload attempt: after vi.runAllTimers() and
await nextTick(), assert the component state (e.g., check vm.rootNodes or
wrapper.findComponent(CascaderPanel).vm data that stores loaded nodes, or verify
the rendered node with value 'loaded') to ensure the lazyLoad resolution took
effect prior to calling vm.loadLazyRootNodes() and the final
expect(lazyLoad).toHaveBeenCalledTimes(1).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/components/cascader-panel/__tests__/cascader-panel.test.tsx`:
- Around line 602-631: Add a post-timer assertion to confirm the lazy nodes were
actually loaded before the final reload attempt: after vi.runAllTimers() and
await nextTick(), assert the component state (e.g., check vm.rootNodes or
wrapper.findComponent(CascaderPanel).vm data that stores loaded nodes, or verify
the rendered node with value 'loaded') to ensure the lazyLoad resolution took
effect prior to calling vm.loadLazyRootNodes() and the final
expect(lazyLoad).toHaveBeenCalledTimes(1).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f093b720-ef5b-4598-b0d7-82404ef17b6f

📥 Commits

Reviewing files that changed from the base of the PR and between 0eb23a9 and 3525f8c.

📒 Files selected for processing (2)
  • packages/components/cascader-panel/__tests__/cascader-panel.test.tsx
  • packages/components/cascader-panel/src/index.vue

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 18, 2026

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 86.33% 18703 / 21664
🔵 Statements 85.15% 19584 / 22999
🔵 Functions 84.67% 4955 / 5852
🔵 Branches 75.84% 10925 / 14405
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/components/cascader-panel/src/index.vue 92.79% 88.33% 100% 92.57% 293, 356-386, 446
Generated in workflow #2856 for commit 1f154ed by the Vitest Coverage Report Action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 18, 2026

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

Copy link
Copy Markdown
Member

@keeplearning66 keeplearning66 left a comment

Choose a reason for hiding this comment

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

👍

@btea btea merged commit c8f7c79 into dev May 18, 2026
17 checks passed
@btea btea deleted the fix/cascader-lazyLoad-two-call branch May 18, 2026 10:51
@github-actions
Copy link
Copy Markdown
Contributor

@rzzf Thanks for your contribution! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants