fix(VField): do not reserve empty space for clear icon

[J-Sek]

Description

Another take on the reserved space for clear icon.

• aims to keep fade-in/out on hover/focus
• verify RTL
• verify on VSelect with chips

Note1: I am not sure if I like the text shift in the textarea

Note2: we could just drop CSS in favor of JS transition - here is a minor improvement on top of #20474. It would only need (1) detection for media (hover: none) and (2) approval for the behavior change

fixes #20375
closes #20474
closes #20534

Markup:

<template>
  <v-container max-width="1000">
    <v-switch v-model="appendIcon" label="append icon" hide-details />
    <v-divider class="mb-6" />
    <v-row>
      <v-col cols="12" md="4">
        <v-text-field v-model="msg" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" clearable />
        <v-text-field v-model="msg" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" clearable persistent-clear />
        <v-text-field v-model="msg" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" />
      </v-col>
      <v-col cols="12" md="4">
        <v-number-input v-model="num" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" :precision="10" clearable />
        <v-number-input v-model="num" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" :precision="10" clearable persistent-clear />
        <v-number-input v-model="num" :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" :precision="10" />
      </v-col>
      <v-col cols="12" md="4">
        <v-textarea v-model="msg" rows="2" auto-grow :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" clearable />
        <v-textarea v-model="msg" rows="2" auto-grow :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" clearable persistent-clear />
        <v-textarea v-model="msg" rows="2" auto-grow :append-inner-icon="appendIcon ? 'mdi-cow' : undefined" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'
  const num = ref(111111111111.000000001)
  const msg = ref('tax the rich / tax the rich / tax the rich / tax the rich / tax the rich / tax')
  const appendIcon = ref(false)
</script>

[Copilot]

Pull Request Overview

This PR updates the VField component to stop reserving space for the clear icon and instead animate its width on hover or focus.

• Removes hasClear from the hasAppend calculation in VField.tsx
• Introduces max-width transitions and transform-based positioning for the clear icon in VField.sass

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/vuetify/src/components/VField/VField.tsx	Stop treating clear button as an appended icon placeholder
packages/vuetify/src/components/VField/VField.sass	Add max-width transitions and transform logic for clear icon

Comments suppressed due to low confidence (1)

packages/vuetify/src/components/VField/VField.tsx:224

• [nitpick] The name hasAppend is now specific to the append icon and no longer covers the clear button. Renaming it to something like hasAppendIcon would make its purpose clearer.

const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon)

[Copilot]

The use of translateX here won’t auto-flip in RTL mode, causing the clear icon to animate in the wrong direction. Consider using a logical property or adjusting the transform based on the dir attribute to preserve correct behavior in RTL layouts.

Suggested change

	transform: translateX(calc(-0.5 * var(--v-field-padding-end) - #{$field-clearable-margin}))
	transform: translateX(calc((#{settings.$dir == 'rtl' ? 0.5 : -0.5}) * var(--v-field-padding-end) - #{$field-clearable-margin}))

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.