fix(VField): fix regression hide label with single-line

vuetifyjs · Dec 10, 2024 · 6712191 · 6712191
1 parent 4a628a3
commit 6712191
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -137,7 +137,8 @@ export const VField = genericComponent<new <T>(
     const { rtlClasses } = useRtl()
 
     const isActive = computed(() => props.dirty || props.active)
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
+    const hasLabel = computed(() => !!(props.label || slots.label))
+    const hasFloatingLabel = computed(() => !props.singleLine && hasLabel.value)
 
     const uid = getUid()
     const id = computed(() => props.id || `input-${uid}`)
@@ -156,7 +157,7 @@ export const VField = genericComponent<new <T>(
     }))
 
     watch(isActive, val => {
-      if (hasLabel.value) {
+      if (hasFloatingLabel.value) {
         const el: HTMLElement = labelRef.value!.$el
         const targetEl: HTMLElement = floatingLabelRef.value!.$el
 
@@ -290,7 +291,7 @@ export const VField = genericComponent<new <T>(
           )}
 
           <div class="v-field__field" data-no-activator="">
-            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && (
+            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && (
               <VFieldLabel
                 key="floating-label"
                 ref={ floatingLabelRef }
@@ -382,7 +383,7 @@ export const VField = genericComponent<new <T>(
               <>
                 <div class="v-field__outline__start" />
 
-                { hasLabel.value && (
+                { hasFloatingLabel.value && (
                   <div class="v-field__outline__notch">
                     <VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
                       { label() }
@@ -394,7 +395,7 @@ export const VField = genericComponent<new <T>(
               </>
             )}
 
-            { isPlainOrUnderlined.value && hasLabel.value && (
+            { isPlainOrUnderlined.value && hasFloatingLabel.value && (
               <VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
                 { label() }
               </VFieldLabel>