refactor(components): [autocomplete] use type-based definitions by E66Crisp · Pull Request #23410 · element-plus/element-plus

E66Crisp · 2026-01-17T10:38:31Z

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.

rel #23399

Summary by CodeRabbit

New Features
- Enhanced Autocomplete: placement options, debounce, improved suggestion handling, defaulted fetch behavior, popup styling, focus/select controls, and loop navigation.
Refactor
- Prop surface modernized and expanded for Autocomplete; legacy public prop types marked deprecated for compatibility.
Chores
- Added shared input defaults to unify input component behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2026-01-17T10:38:40Z

coderabbitai · 2026-01-17T10:38:43Z

📝 Walkthrough

Walkthrough

Refactors Autocomplete and Input public prop APIs: introduces AutocompletePlacement and AutocompleteProps, exports shared inputPropsDefaults, switches components to defineProps<...>() with withDefaults, sets new defaults (e.g., fetchSuggestions NOOP), and marks legacy public prop aliases as deprecated. (47 words)

Changes

Cohort / File(s)	Summary
Autocomplete Types `packages/components/autocomplete/src/autocomplete.ts`	Adds `AutocompletePlacement` union and `AutocompleteProps` interface (extends `InputProps`) with many new fields (valueKey, modelValue, debounce, placement, fetchSuggestions, popperClass, popperStyle, triggerOnFocus, selectWhenUnmatched, hideLoading, teleported, appendTo, highlightFirstItem, fitInputWidth, loopNavigation); introduces deprecation comments for legacy public alias and switches public-type composition imports.
Autocomplete Component `packages/components/autocomplete/src/autocomplete.vue`	Replaces `defineProps(autocompleteProps)` with `defineProps<AutocompleteProps>()` + `withDefaults(...)`; adds `NOOP` default for `fetchSuggestions` and supplies several new defaulted props (valueKey, modelValue, debounce, placement, triggerOnFocus, loopNavigation, teleported).
Input Defaults Export `packages/components/input/src/input.ts`	Adds exported `inputPropsDefaults` constant (as const) containing canonical default values for `InputProps` (uses `markRaw(CircleClose)` for `clearIcon`).
Input Component `packages/components/input/src/input.vue`	Replaces inline prop defaults with spread `...inputPropsDefaults` in `withDefaults(defineProps<InputProps>(), ...)`; updates imports to consume `inputPropsDefaults`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor(components): [affix] use type-based definitions #23400 — same pattern: migrate component prop definitions to explicit TypeScript interfaces and deprecate legacy prop aliases.
refactor(components): [input] use type-based definitions #23366 — related Input prop refactor that centralizes Input props/defaults and switches components to typed defineProps usage.
refactor(components): [icon] use type-based definitions #23412 — related refactor replacing runtime prop objects with typed interfaces and updating components to use defineProps() + withDefaults.

Suggested reviewers

rzzf
keeplearning66
btea

Poem

🐇 I hopped through lines of code tonight,
Swapped old props for typed delight.
Defaults in baskets, tidy and bright,
Autocomplete hums, Input feels light.
A tiny rabbit claps—what a sight!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: refactoring the autocomplete component to use type-based definitions instead of build-time prop definitions.
Description check	✅ Passed	The PR description confirms all required checklist items are completed: following contributing guide, merging to dev branch, and providing descriptions with issue reference (`#23399`).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

📝 Generate docstrings

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-01-17T10:40:17Z

Open in StackBlitz

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

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

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

commit: e59507f

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/components/autocomplete/src/autocomplete.ts`:
- Around line 35-104: The AutocompleteProps interface narrows modelValue to
string | number which conflicts with InputProps (allowing null/undefined) and
breaks consumers/tests; update AutocompleteProps to inherit the same modelValue
type as InputProps (do not re-declare or, if re-declaring, use
InputProps['modelValue']) so modelValue remains nullable/optional; locate the
modelValue declaration in AutocompleteProps and replace the narrowed type with
the original InputProps type (or remove the override) to match the
implementation that already handles null via the ?? '' usage.

github-actions · 2026-01-17T10:47:23Z

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

Co-authored-by: rzzf <[email protected]>

E66Crisp · 2026-01-17T14:38:42Z

Hello @rzzf , the refactoring of the avatar component will not be included in this PR, as this component overall involves the use of defineComponent. I'm not sure if this type of modification is reasonable. Thank you for your review.

rzzf

Thank you for your quick response.

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/components/input/src/input.vue (1)

205-219: Missing default values in inputPropsDefaults — this will cause regressions.

The inputPropsDefaults export is incomplete. It omits several defaults from the original inline configuration, most notably autosize: false. When input.vue spreads inputPropsDefaults into withDefaults(), these properties will lose their default values:

autosize: false (behavioral default — important)

containerRole: undefined

inputmode: undefined

id: undefined

Add these missing defaults to inputPropsDefaults before the refactoring can be merged.

Co-authored-by: rzzf <[email protected]>

rzzf

Thanks for all the back-and-forth

E66Crisp · 2026-01-17T16:44:52Z

Thanks for all the back-and-forth感谢大家的来回交流

Happy to contribute

github-actions · 2026-01-18T08:09:07Z

@E66Crisp Thanks for your contribution! ❤️

refactor(components): [autocomplete] use type-based definitions

fc11969

pull-request-triage Bot assigned E66Crisp Jan 17, 2026

pull-request-triage Bot added the Needs Review label Jan 17, 2026

github-actions Bot added the Contribution::Community label Jan 17, 2026

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/autocomplete/src/autocomplete.ts

rzzf mentioned this pull request Jan 17, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

refactor(components): [avatar] use type-based definitions

4ecb88d

E66Crisp changed the title ~~refactor(components): [autocomplete] use type-based definitions~~ refactor(components): [autocomplete/avatar] use type-based definitions Jan 17, 2026

rzzf requested changes Jan 17, 2026

View reviewed changes

Comment thread packages/components/avatar/src/avatar.vue Outdated

Comment thread packages/components/avatar/src/avatar-group.tsx Outdated

E66Crisp and others added 3 commits January 17, 2026 19:58

Update packages/components/avatar/src/avatar.vue

fd10566

Co-authored-by: rzzf <[email protected]>

revert: rollback changes to avatar-group-props.ts and avatar-group.tsx

6551e1c

revert: rollback changes to avatar.ts and avatar.vue

bf29e22

E66Crisp changed the title ~~refactor(components): [autocomplete/avatar] use type-based definitions~~ refactor(components): [autocomplete] use type-based definitions Jan 17, 2026

E66Crisp requested a review from rzzf January 17, 2026 14:29

rzzf requested changes Jan 17, 2026

View reviewed changes

Comment thread packages/components/autocomplete/src/autocomplete.vue

refactor(components): export inputDefaults for reuse

c3978ea

rzzf reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/input/src/input.vue Outdated

refactor(components): export inputPropsDefaults for reuse

b06960e

E66Crisp requested a review from rzzf January 17, 2026 15:41

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

rzzf reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/input/src/input.ts Outdated

Update packages/components/input/src/input.ts

e59507f

Co-authored-by: rzzf <[email protected]>

E66Crisp requested a review from rzzf January 17, 2026 16:10

This comment was marked as outdated.

Sign in to view

rzzf approved these changes Jan 17, 2026

View reviewed changes

btea approved these changes Jan 18, 2026

View reviewed changes

btea merged commit 3ef8bbb into element-plus:dev Jan 18, 2026
17 checks passed

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

coderabbitai Bot mentioned this pull request Jan 30, 2026

chore: supplement deprecation annotations #23570

Merged

3 tasks

coderabbitai Bot mentioned this pull request Mar 3, 2026

refactor(components): [input] make component generic #23716

Closed

3 tasks

coderabbitai Bot mentioned this pull request Mar 19, 2026

feat(components): [input] add count-graphemes #12041

Merged

3 tasks

This was referenced Mar 28, 2026

refactor(components): [autocomplete] make component generic #23927

Merged

refactor(components): [mention/autocomplete] remove references marked as deprecated #23970

Merged

Uh oh!

Conversation

E66Crisp commented Jan 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jan 17, 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!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

E66Crisp commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

rzzf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

rzzf left a comment

Choose a reason for hiding this comment

Uh oh!

E66Crisp commented Jan 17, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

E66Crisp commented Jan 17, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

coderabbitai Bot commented Jan 17, 2026 •

edited

Loading

pkg-pr-new Bot commented Jan 17, 2026 •

edited

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

E66Crisp commented Jan 17, 2026 •

edited

Loading