Empty Textarea slightly shifts form on submission during disabled state
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
Nuxt project info:
| Operating system | Linux 7.0.2-3-pve |
| CPU | 12th Gen Intel(R) Core(TM) i5-1240P (4 cores) |
| Node.js version | v22.17.1 |
| nuxt/cli version | 3.35.2 |
| Package manager | pnpm@11.5.0 |
| Nuxt version | 4.4.6 |
| Nitro version | 2.13.4 |
| Builder | vite@7.3.3 |
| Config | compatibilityDate, css, devtools, eslint, modules, routeRules |
| Modules | @nuxt/eslint@1.15.2, @nuxt/ui@4.8.1 |
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.8.1
Reproduction
Having this page shows the error in an otherwise empty/new project.
<script setup lang="ts">
const state = reactive({
title: '',
description: '',
});
function secondDelay() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 2000);
});
}
async function submit() {
await secondDelay();
console.log('Form submitted:', state);
}
</script>
<template>
<div class="test">
<UForm :state="state" @submit="submit">
<UFormField label="Title">
<UInput v-model="state.title" placeholder="Title" />
</UFormField>
<UFormField label="Description">
<UTextarea v-model="state.description" />
</UFormField>
<UButton type="submit">Submit</UButton>
</UForm>
</div>
</template>
Description
When the submit button is pressed, a small margin/padding something slightly shifts the layout.
Before clicking:
while form is disabled during submission:
This only happens when the Textarea is empty. As soon as there's content in the Textarea, (even white space), the shift doesn't happen anymore.
Additional context
No response
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Nuxt reproduction using UForm, UFormField, UInput, UTextarea, and UButton, then inspect the UTextarea and form disabled-state behavior. Confirm the layout shift occurs only for an empty textarea during submission, and add a regression test or equivalent verification showing that the form geometry remains stable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100