Skip to content

Conversation

KaelWD
Copy link
Member

@KaelWD KaelWD commented Sep 3, 2025

Description

fixes #21982

Markup:

<template>
  <v-app>
    <v-container>
      <div style="width: 278px">
        <v-textarea
          :model-value="text"
          max-rows="9"
          rows="1"
          variant="filled"
          auto-grow
        />
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
  const text = 'foo/bar/foo/bar/foo/bar/foo/bar '.repeat(8)
</script>

&.v-textarea--height-capped
.v-field__input
scrollbar-gutter: stable
scrollbar-width: thin
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it makes it slightly inconsistent when textarea with auto-grow appears next to the regular one (without this prop heightCapped is always false and the *--height-capped is never present even though it has scrollbar, see playground).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would drop thin and change none to:

&:not(.v-textarea--height-capped)
  .v-field__input
    scrollbar-width: none

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.9.6] VTextarea auto-grow grows too much when text width is similar to the textarea width
2 participants