fix(VField): allow center-affix to set singleLine only if it is null

fixes #20134
vuetifyjs · Jul 14, 2024 · bc2f96a · bc2f96a
1 parent 8f871fc
commit bc2f96a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/api-generator/src/locale/en/VField.json b/packages/api-generator/src/locale/en/VField.json
@@ -2,7 +2,7 @@
   "props": {
     "appendInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
     "baseColor": "Sets the color of the input when it is not focused.",
-    "centerAffix": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** under the hood, and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.",
+    "centerAffix": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** when it is not explicitly set to a Boolean (when it is `null` by default), and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.",
     "clearIcon": "The icon used when the **clearable** prop is set to true.",
     "dirty": "Manually apply the dirty state styling.",
     "disabled": "Removes the ability to click or target the input.",

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -76,7 +76,10 @@ export const makeVFieldProps = propsFactory({
   persistentClear: Boolean,
   prependInnerIcon: IconValue,
   reverse: Boolean,
-  singleLine: Boolean,
+  singleLine: {
+    type: Boolean,
+    default: null,
+  },
   variant: {
     type: String as PropType<Variant>,
     default: 'filled',
@@ -133,7 +136,7 @@ export const VField = genericComponent<new <T>(
     const { roundedClasses } = useRounded(props)
     const { rtlClasses } = useRtl()
 
-    const isSingleLine = computed(() => props.singleLine || props.centerAffix)
+    const isSingleLine = computed(() => props.singleLine != null ? props.singleLine : props.centerAffix)
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label))
 

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -293,6 +293,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             props.class,
           ]}
           { ...textFieldProps }
+          centerAffix={ true }
+          singleLine={ false } 
           style={ props.style }
           inputmode="decimal"
         >