fix(components): [select] correctly display selected labels after `options` change by LostElkByte · Pull Request #24036 · element-plus/element-plus

LostElkByte · 2026-04-13T01:38:30Z

Fixes selected items showing raw value instead of label when remote search
options change.

Root cause

The template renders options with :key="index", so Vue reuses option
components instead of destroying/recreating them. When props update:

onOptionDestroy(oldVal) + onOptionCreate(vm) fire from the value watcher
cachedOptions retains stale keys pointing to VMs whose value has changed
getOption() iterates by vm.value — no match → falls back to raw value

Fix

In getOption, before the raw-value fallback, check states.selected for
a previously resolved label.

issue

fix #23624

Summary by CodeRabbit

Bug Fixes
- Selected labels in multi-select dropdowns now remain stable when remote option results refresh; previously chosen items keep their displayed label and underlying value after subsequent remote queries and list updates.
Tests
- Added automated test coverage to validate selection label and value persistence across successive remote updates and option list refreshes.

github-actions · 2026-04-13T01:38:41Z

coderabbitai · 2026-04-13T01:38:47Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

getOption in the select hook now reuses an existing selected entry’s currentLabel when no cached option is found; a Vitest was added to verify a selected option’s label persists across remote-search result updates.

Changes

Cohort / File(s)	Summary
Test Case Addition `packages/components/select/__tests__/select.test.ts`	Added a Vitest that mounts a multiple, filterable, remote `el-select`, drives two remote queries (`"foo"` → `"bar"`) using fake timers, selects an option after the first query, and asserts the selected item's `currentLabel` and `value` remain unchanged after the second query.
Select logic change `packages/components/select/src/useSelect.ts`	In `getOption`, when no cached option matches the value, first look up `states.selected` for an existing selected entry and reuse its `currentLabel` (for primitive and object values) before falling back to the raw value; preserves prior object-value label precedence.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix(components): [select] allow empty labels when persistent is false #23809: Adjusts select fallback label logic; closely related as both change how a select option's label/currentLabel is determined when cached options are missing.

Suggested reviewers

rzzf
btea
keeplearning66

Poem

🐰 I nibble labels soft and bright,
Hopping through queries left and right.
When options wander, stray, or roam,
My chosen tag still calls it home.
🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description explains the root cause, the fix applied, and references the linked issue, though it lacks explicit checkboxes from the template.
Linked Issues check	✅ Passed	The code changes directly address issue `#23624` by implementing the fix to preserve selected item labels during remote search option updates.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the remote search label issue: a test case validates the fix and useSelect.ts implements the label lookup logic.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title correctly identifies the main fix: ensuring selected labels display correctly after options change in el-select, which directly addresses the changeset's core objective of preserving labels during remote search updates.

_{✏️ 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 · 2026-04-13T01:39:48Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@24036

npm i https://pkg.pr.new/element-plus@24036

yarn add https://pkg.pr.new/[email protected]

commit: ee3f5ae

coderabbitai

🧹 Nitpick comments (1)

packages/components/select/__tests__/select.test.ts (1)

4579-4631: Make timer cleanup exception-safe.

If anything throws before Line 4630, fake timers remain active and may destabilize later tests. Wrap test body in try/finally and restore timers there.

Proposed test-hardening diff

   test('should preserve selected label when remote options change', async () => {
     vi.useFakeTimers()
     const wrapper = mount(
@@
       },
       { attachTo: 'body' }
     )
-
-    const select = wrapper.findComponent({ name: 'ElSelect' }).vm
-    select.onInput({ target: { value: 'foo' } })
-    vi.runAllTimers()
-    await nextTick()
-    getOptions()[0].click()
-    await nextTick()
-    expect(select.states.selected[0].currentLabel).toBe('Label foo-0')
-
-    select.onInput({ target: { value: 'bar' } })
-    vi.runAllTimers()
-    await nextTick()
-
-    expect(select.states.selected[0].currentLabel).toBe('Label foo-0')
-    vi.useRealTimers()
+    try {
+      const select = wrapper.findComponent({ name: 'ElSelect' }).vm
+      select.onInput({ target: { value: 'foo' } })
+      vi.runAllTimers()
+      await nextTick()
+      getOptions()[0].click()
+      await nextTick()
+      expect(select.states.selected[0].currentLabel).toBe('Label foo-0')
+
+      select.onInput({ target: { value: 'bar' } })
+      vi.runAllTimers()
+      await nextTick()
+
+      expect(select.states.selected[0].currentLabel).toBe('Label foo-0')
+    } finally {
+      wrapper.unmount()
+      vi.useRealTimers()
+    }
   })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/components/select/__tests__/select.test.ts` around lines 4579 -
4631, The test enables fake timers with vi.useFakeTimers() but only restores
them at the end, so if something throws the fake timers remain active; wrap the
test body (after vi.useFakeTimers()) in a try { ... } finally {
vi.useRealTimers() } block so that vi.useRealTimers() is always called (ensure
the existing interactions with wrapper, select.vm, select.onInput,
vi.runAllTimers(), nextTick, getOptions(), etc. remain inside the try).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/components/select/__tests__/select.test.ts`:
- Around line 4579-4631: The test enables fake timers with vi.useFakeTimers()
but only restores them at the end, so if something throws the fake timers remain
active; wrap the test body (after vi.useFakeTimers()) in a try { ... } finally {
vi.useRealTimers() } block so that vi.useRealTimers() is always called (ensure
the existing interactions with wrapper, select.vm, select.onInput,
vi.runAllTimers(), nextTick, getOptions(), etc. remain inside the try).

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc5f75c1-7e64-4920-945d-12aa105be33a

📥 Commits

Reviewing files that changed from the base of the PR and between 9f4f884 and c094f37.

📒 Files selected for processing (2)

packages/components/select/__tests__/select.test.ts
packages/components/select/src/useSelect.ts

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c094f37b38

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

github-actions · 2026-04-13T01:46:03Z

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

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d14dc2b555

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

LostElkByte · 2026-04-13T06:01:46Z

@codex review

chatgpt-codex-connector · 2026-04-13T06:04:47Z

Codex Review: Didn't find any major issues. Already looking forward to the next diff.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

keeplearning66

The newly added test case seems to pass even before the changes. 🤔

LostElkByte added 2 commits April 13, 2026 09:31

fix(components): [select] preserve selected label on remote search

eb98191

test(components): [select] preserve selected label on remote search

c094f37

pull-request-triage Bot assigned LostElkByte Apr 13, 2026

pull-request-triage Bot added the Needs Review label Apr 13, 2026

github-actions Bot added the Contribution::Community label Apr 13, 2026

github-actions Bot added the CommitMessage::Unqualified Unqualified commit message label Apr 13, 2026

LostElkByte changed the title ~~fix(components): [select] preserve selected label on remote options change (#23624)~~ fix(components): [select] preserve selected label on remote search (#23624) Apr 13, 2026

coderabbitai Bot reviewed Apr 13, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Apr 13, 2026

View reviewed changes

Comment thread packages/components/select/src/useSelect.ts Outdated

LostElkByte changed the title ~~fix(components): [select] preserve selected label on remote search (#23624)~~ fix(components): [select] selected label on remote search (#23624) Apr 13, 2026

github-actions Bot removed the CommitMessage::Unqualified Unqualified commit message label Apr 13, 2026

LostElkByte changed the title ~~fix(components): [select] selected label on remote search (#23624)~~ fix(components): [select] selected label on remote search Apr 13, 2026

fix(components): [select] use latest object label in getOption

d14dc2b

chatgpt-codex-connector Bot reviewed Apr 13, 2026

View reviewed changes

Comment thread packages/components/select/src/useSelect.ts Outdated

fix(components): [select] rebuild fallback option in getOption

10af2d8

keeplearning66 reviewed Apr 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(components): [select] correctly display selected labels after `options` change#24036

fix(components): [select] correctly display selected labels after `options` change#24036
btea merged 7 commits into
element-plus:devfrom
LostElkByte:fix/select-remote-search-label

LostElkByte commented Apr 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 13, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

LostElkByte commented Apr 13, 2026

Uh oh!

chatgpt-codex-connector Bot commented Apr 13, 2026

Uh oh!

keeplearning66 left a comment

Uh oh!

Uh oh!

Conversation

LostElkByte commented Apr 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root cause

Fix

issue

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

github-actions Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

LostElkByte commented Apr 13, 2026

Uh oh!

chatgpt-codex-connector Bot commented Apr 13, 2026

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

LostElkByte commented Apr 13, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Apr 13, 2026 •

edited

Loading

coderabbitai Bot commented Apr 13, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 13, 2026 •

edited

Loading

github-actions Bot commented Apr 13, 2026 •

edited

Loading