fix(components): [input] avoid border flicker while resizing by rzzf · Pull Request #24078 · element-plus/element-plus

rzzf · 2026-04-16T09:14:07Z

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.

This happens because resizing triggers frequent mouseenter and mouseleave events as the cursor moves, causing hovering.value to change repeatedly. As a result, the clear icon is constantly created and destroyed, leading to layout reflow.

There is no event for detecting textarea resize, so this is a workaround. If there’s a better approach, please let me know.

Summary by CodeRabbit

Bug Fixes
- Improved textarea auto-resizing so height is calculated and applied reliably after value changes, and manual/resizable textareas preserve and respect explicit heights when present.

azure-pipelines · 2026-04-16T09:14:18Z

Azure Pipelines: 1 pipeline(s) were filtered out due to trigger conditions.

github-actions · 2026-04-16T09:14:18Z

pkg-pr-new · 2026-04-16T09:15:15Z

Open in StackBlitz

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

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

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

commit: 371dbfc

github-actions · 2026-04-16T09:15:52Z

Size Change: +239 B (+0.02%)

Total Size: 1.47 MB

📦 View Changed

Filename	Size	Change
`dist/element-plus/dist/index.full.js`	434 kB	+70 B (+0.02%)
`dist/element-plus/dist/index.full.min.js`	287 kB	+62 B (+0.02%)
`dist/element-plus/dist/index.full.min.mjs`	280 kB	+47 B (+0.02%)
`dist/element-plus/dist/index.full.mjs`	425 kB	+60 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
`dist/element-plus/dist/index.css`	47.3 kB

_{compressed-size-action}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: af52f8ee31

ℹ️ About Codex in GitHub

Your team has set up Codex to 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 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

github-actions · 2026-04-16T09:18:03Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	86.07%	18376 / 21349
🔵	Statements	84.94%	19239 / 22649
🔵	Functions	84.39%	4894 / 5799
🔵	Branches	75.55%	10687 / 14145

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/components/input/src/input.vue	84.64%	82.04%	82.25%	84.8%	302, 365-376, 413-426, 519-535, 618, 621-622, 635, 651, 673, 709-712, 110-150

Generated in workflow #2495 for commit 371dbfc by the Vitest Coverage Report Action

coderabbitai · 2026-04-16T09:18:28Z

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4fcdfde4-6bf1-4cc5-9ca2-c7ac0aca902c

📥 Commits

Reviewing files that changed from the base of the PR and between f639fe9 and 371dbfc.

📒 Files selected for processing (1)

packages/components/input/src/input.vue

🚧 Files skipped from review as they are similar to previous changes (1)

packages/components/input/src/input.vue

📝 Walkthrough

Walkthrough

Adjusted textarea autosize handling: added a textareaHeight ref, conditionally apply explicit height in textareaStyle, defer-capture initial height during initialization when resizing is allowed, and reset height state in the modelValue watcher.

Changes

Cohort / File(s)	Summary
Textarea Resize Stabilization `packages/components/input/src/input.vue`	Added `textareaHeight` ref and conditional `{ height: textareaHeight }` override in `textareaStyle`. Modified initialization to defer-capture `textarea.style.height` via `setTimeout` when `props.resize !== 'none'`. Updated `modelValue` watcher to call `resizeTextarea()` and clear `textareaHeight` when `props.autosize` is enabled.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

Needs Review

Suggested reviewers

btea
Dsaquel
keeplearning66

Poem

🐰 I poked the textarea, it wobbled and sighed,
I nudged a ref, caught its height as it tried,
A gentle timeout, a steadyened beat,
Now borders sit quiet—no jittery feet. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing border flicker during textarea resizing by avoiding frequent hover state changes.
Description check	✅ Passed	The description includes the template checklist, references the linked issue (`#24076`), explains the root cause (hover state toggling the clear icon), and acknowledges it as a workaround due to lack of resize event.
Linked Issues check	✅ Passed	The PR addresses the core requirement from issue `#24076`: fixing border flicker during textarea resizing. The code changes prevent frequent clear icon creation/destruction by managing textarea height explicitly and deferring height capture, which stops hover state toggling.
Out of Scope Changes check	✅ Passed	All changes in input.vue are focused on fixing the resize flicker issue through textarea height management. No unrelated or out-of-scope modifications are present.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/24076

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.}

github-actions · 2026-04-16T09:21:38Z

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

coderabbitai

Actionable comments posted: 1

🤖 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/input/src/input.vue`:
- Around line 603-605: The isResizingTextarea flag can remain true if a mouseup
occurs outside the window; add robust fallback resets by also listening for
pointerup, window blur, and document visibilitychange to set
isResizingTextarea.value = false. Update the useEventListener calls around the
textarea resize logic (the existing useEventListener('mouseup', ...) handler and
related resize handlers) to also register handlers for 'pointerup', 'blur' (on
window), and 'visibilitychange' (on document) that clear isResizingTextarea, and
ensure these listeners use the same cleanup lifecycle as the existing
useEventListener usage; apply the same change to the other similar blocks
referenced (the blocks around the other useEventListener calls).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 79a21dec-d65a-4f31-bd33-dbc2cee53aaa

📥 Commits

Reviewing files that changed from the base of the PR and between 91a1d2a and af52f8e.

📒 Files selected for processing (1)

packages/components/input/src/input.vue

azure-pipelines · 2026-04-16T09:31:57Z

Azure Pipelines: 1 pipeline(s) were filtered out due to trigger conditions.

fix(components): [input] avoid border flicker while resizing

af52f8e

pull-request-triage Bot assigned rzzf Apr 16, 2026

chatgpt-codex-connector Bot reviewed Apr 16, 2026

View reviewed changes

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

coderabbitai Bot reviewed Apr 16, 2026

View reviewed changes

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

fix: update

ea996ae

coderabbitai Bot reviewed Apr 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(components): [input] avoid border flicker while resizing#24078

fix(components): [input] avoid border flicker while resizing#24078
btea merged 8 commits into
devfrom
fix/24076

rzzf commented Apr 16, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

azure-pipelines Bot commented Apr 16, 2026

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

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

edited

Loading

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 16, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

azure-pipelines Bot commented Apr 16, 2026

Uh oh!

Uh oh!

Conversation

rzzf commented Apr 16, 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!

azure-pipelines Bot commented Apr 16, 2026

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Apr 16, 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!

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

Uh oh!

Coverage Report

Uh oh!

coderabbitai Bot commented Apr 16, 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

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Apr 16, 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!

azure-pipelines Bot commented Apr 16, 2026

Uh oh!

rzzf commented Apr 16, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

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

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

coderabbitai Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading