Skip to content

fix(Textarea): prevent baseline shift in forms#6559

Open
Akur1a wants to merge 2 commits into
nuxt:v4from
Akur1a:fix/textarea-disabled-shift
Open

fix(Textarea): prevent baseline shift in forms#6559
Akur1a wants to merge 2 commits into
nuxt:v4from
Akur1a:fix/textarea-disabled-shift

Conversation

@Akur1a
Copy link
Copy Markdown
Contributor

@Akur1a Akur1a commented Jun 5, 2026

What changed

Adds �lign-top to the Textarea root classes so it doesn't participate in baseline alignment when it sits inline in a form layout.

This keeps the existing Input root classes intact, but avoids the small vertical jump that can show up when an empty textarea is disabled during submit.

Fixes #6541

Testing

  • npm run test -- Textarea
  • npm exec -- eslint src/theme/textarea.ts test/components/Textarea.spec.ts
  • npm run build

@Akur1a Akur1a requested a review from benjamincanac as a code owner June 5, 2026 04:55
@github-actions github-actions Bot added the v4 #4488 label Jun 5, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 5, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9d191a63-f560-4da3-a8ee-f115946c6daf

📥 Commits

Reviewing files that changed from the base of the PR and between 4da3a5d and efb5e00.

⛔ Files ignored due to path filters (2)
  • test/components/__snapshots__/Textarea-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/Textarea.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • src/theme/textarea.ts
  • test/components/Textarea.spec.ts

📝 Walkthrough

Walkthrough

This PR addresses a form layout shift that occurs when a textarea is empty and disabled during form submission. The change adds relative inline-flex items-center align-top Tailwind classes to the textarea root slot styling. A new test case verifies that the component renders with the align-top class attribute.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding align-top to Textarea to fix baseline shift in forms.
Description check ✅ Passed The description clearly explains the changes and references the specific issue being fixed (#6541).
Linked Issues check ✅ Passed The PR directly addresses issue #6541 by adding align-top to Textarea root classes to prevent baseline shift when empty.
Out of Scope Changes check ✅ Passed All changes are focused on fixing the baseline shift issue; the Textarea module update and corresponding test are directly scoped to the linked objective.
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 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
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 5, 2026

npm i https://pkg.pr.new/@nuxt/ui@6559

commit: 8db9446

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

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Empty Textarea slightly shifts form on submission during disabled state

1 participant