Skip to content

fix(components): [input] prevent layout shift when toggling clear icon#23661

Merged
rzzf merged 2 commits into
devfrom
fix/input-clear-icon-dont-add-width
Apr 15, 2026
Merged

fix(components): [input] prevent layout shift when toggling clear icon#23661
rzzf merged 2 commits into
devfrom
fix/input-clear-icon-dont-add-width

Conversation

@Dsaquel
Copy link
Copy Markdown
Member

@Dsaquel Dsaquel commented Feb 15, 2026 •
edited by rzzf
Loading

fix #15869
fix #23981

Before:
Peek 2026-02-15 18-42

before demo

Summary by CodeRabbit

  • Style

    • Added a smooth color transition to the input clear icon for improved visual feedback.

  • Bug Fixes

    • Refined clear-icon rendering and visibility so it only appears under appropriate editable/enabled states.
    • Consolidated suffix/clear display logic for more consistent show/hide behavior while preserving existing clear interaction and click behavior.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 15, 2026 •
edited
Loading

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 15, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

Reworks the input component's clear-icon rendering: DOM presence is gated by clearable via a new renderClear computed, while showClear controls its visible style; suffix visibility logic updated accordingly. Adds a color transition rule for the input clear icon in theme CSS.

Changes

Cohort / File(s) Summary
Input Component Clear Icon Logic
packages/components/input/src/input.vue		 Introduces renderClear computed to gate clear-icon DOM rendering by clearable, moves clear icon into suffix container, uses showClear for style-based visibility, and updates suffixVisible logic to consider clearable.
Input Styling
packages/theme-chalk/src/input.scss		 Adds a color transition rule for .<namespace>-input__clear using the theme transition-duration variable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

Contribution::Community, Needs Review

Suggested reviewers

  • rzzf
  • btea

Poem

🐰 A tiny clear icon tucked away,
Rendered by rules yet hidden by play,
It brightens its hue with a gentle slide,
Waiting for focus to beam with pride,
Hopping in code — a joyful, subtle sway.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Description check ❓ Inconclusive The PR description includes issue references and a before/after demo, but lacks a clear explanation of the actual changes made to fix the layout shift problem. Add a detailed description of the solution: explain how moving the clear icon to the right of the suffix icon prevents the layout shift, clarify the implementation details, and confirm this is the intended fix for issues #15869 and #23981.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: preventing layout shift when toggling the clear icon in the input component.
Linked Issues check ✅ Passed The code changes directly address the core requirement from issue #15869: restructuring the clear icon rendering to prevent layout shift when it toggles on/off.
Out of Scope Changes check ✅ Passed All changes are directly scoped to addressing the layout shift issue: input component rendering logic and CSS styling for the clear icon transition.
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
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/input-clear-icon-dont-add-width

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.

Dsaquel
Dsaquel commented Feb 15, 2026
View reviewed changes
Comment thread packages/theme-chalk/src/input.scss
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 15, 2026 •
edited
Loading

Open in StackBlitz

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

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

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

commit: f60daed

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 15, 2026 •
edited
Loading

Size Change: +106 B (+0.01%)

Total Size: 1.66 MB

Filename Size Change
./dist/element-plus/dist/index.css 47.4 kB +12 B (+0.03%)
./dist/element-plus/dist/index.full.js 493 kB +37 B (+0.01%)
./dist/element-plus/dist/index.full.min.js 322 kB +19 B (+0.01%)
./dist/element-plus/dist/index.full.min.mjs 317 kB +11 B (0%)
./dist/element-plus/dist/index.full.mjs 483 kB +27 B (+0.01%)

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 15, 2026 •
edited
Loading

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 85.44% 17967 / 21028
🔵 Statements 84.24% 18807 / 22325
🔵 Functions 83.32% 4808 / 5770
🔵 Branches 73.92% 10338 / 13984
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/components/input/src/input.vue 86.86% 79.39% 79.31% 87.7% 273, 282, 339-344, 344-350, 387, 387-392, 390-391, 440, 485, 488-489, 502, 517, 527, 563-566, 108, 141-143
Generated in workflow #1505

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 15, 2026 •
edited
Loading

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

@rzzf
Copy link
Copy Markdown
Member

rzzf commented Feb 17, 2026

This seems to change the layout when a suffix icon is present. play

@Dsaquel
Copy link
Copy Markdown
Member Author

Dsaquel commented Feb 17, 2026

oh yes, it's inevitable, for some layouts the input will include the clear icon width like you demonstrate.
It's a mini breaking change. thanks for noticing me.

keeplearning66
keeplearning66 approved these changes Feb 24, 2026
View reviewed changes
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.

👍

@rzzf
Copy link
Copy Markdown
Member

rzzf commented Feb 25, 2026

This seems to change the layout when a suffix icon is present. play

I found an earlier discussion and a result that actually looked quite good, but I’m not sure why it was put on hold. Maybe moving the clear icon before the suffix would be a better approach. What do you think?

issue: #7287
pr: #10534

@Dsaquel
Copy link
Copy Markdown
Member Author

Dsaquel commented Feb 25, 2026

I tried the solution of #10534 and it allocate a space for the clear icon too and the breaking change is more present because of the change icon order.

@rzzf
Copy link
Copy Markdown
Member

rzzf commented Feb 25, 2026

If we don’t move it, it does look slightly awkward. I think this BC is probably acceptable.

image

#10534 (comment)

@Dsaquel
Copy link
Copy Markdown
Member Author

Dsaquel commented Feb 25, 2026

Ok i see now, i have moved the clear icon onto the right of the suffix icon 👍 .

I though to deplace the password toggle too but if we do that we probably want to do it for the valideIcon too so to keep it simple and avoid too much unexpected layout, we deplace only the clear icon and thinking at it again, the order is actually subjective so it's fine with the current status quo.

@keeplearning66