fix(NumberField): set modelValue to undefined instead of NaN when clearing input (#1927)

kricsleo · web-flow · commit 48e8b4107a02 · 2025-05-27T08:22:31.000+08:00
diff --git a/packages/core/src/NumberField/NumberFieldRoot.vue b/packages/core/src/NumberField/NumberFieldRoot.vue
@@ -4,7 +4,7 @@ import type { PrimitiveProps } from '@/Primitive'
 import type { FormFieldProps } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
-import { clamp, createContext, snapValueToStep, useFormControl, useLocale } from '@/shared'
+import { clamp, createContext, isNullish, snapValueToStep, useFormControl, useLocale } from '@/shared'
 
 export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {
   defaultValue?: number
@@ -36,7 +36,7 @@ export type NumberFieldRootEmits = {
 }
 
 interface NumberFieldRootContext {
-  modelValue: Ref<number>
+  modelValue: Ref<number | undefined>
   handleIncrease: (multiplier?: number) => void
   handleDecrease: (multiplier?: number) => void
   handleMinMaxValue: (type: 'min' | 'max') => void
@@ -80,7 +80,7 @@ const { disabled, disableWheelChange, invertWheelChange, min, max, step, stepSna
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
   passive: (props.modelValue === undefined) as false,
-}) as Ref<number>
+}) as Ref<number | undefined>
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
@@ -89,12 +89,20 @@ const isFormControl = useFormControl(currentElement)
 const inputEl = ref<HTMLInputElement>()
 
 const isDecreaseDisabled = computed(() => (
-  clampInputValue(modelValue.value) === min.value
-  || (min.value && !isNaN(modelValue.value) ? (handleDecimalOperation('-', modelValue.value, step.value) < min.value) : false)),
+  !isNullish(modelValue.value) && (
+    clampInputValue(modelValue.value) === min.value
+    || (min.value && !isNaN(modelValue.value)
+    )
+      ? (handleDecimalOperation('-', modelValue.value, step.value) < min.value)
+      : false)),
 )
 const isIncreaseDisabled = computed(() => (
-  clampInputValue(modelValue.value) === max.value
-  || (max.value && !isNaN(modelValue.value) ? (handleDecimalOperation('+', modelValue.value, step.value) > max.value) : false)),
+  !isNullish(modelValue.value) && (
+    clampInputValue(modelValue.value) === max.value
+    || (max.value && !isNaN(modelValue.value)
+    )
+      ? (handleDecimalOperation('+', modelValue.value, step.value) > max.value)
+      : false)),
 )
 
 function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {
@@ -143,7 +151,7 @@ const inputMode = computed<HTMLAttributes['inputmode']>(() => {
 // Replace negative textValue formatted using currencySign: 'accounting'
 // with a textValue that can be announced using a minus sign.
 const textValueFormatter = useNumberFormatter(locale, formatOptions)
-const textValue = computed(() => isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))
+const textValue = computed(() => isNullish(modelValue.value) || isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))
 
 function validate(val: string) {
   return numberParser.isValidPartialNumber(val, min.value, max.value)
@@ -168,8 +176,7 @@ function clampInputValue(val: number) {
 
 function applyInputValue(val: string) {
   const parsedValue = numberParser.parse(val)
-
-  modelValue.value = clampInputValue(parsedValue)
+  modelValue.value = isNaN(parsedValue) ? undefined : clampInputValue(parsedValue)
   // Set to empty state if input value is empty
   if (!val.length)
     return setInputValue(val)
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -46,7 +46,7 @@ type RangeCalendarRootContext = {
   isDateHighlightable?: Matcher
   isOutsideVisibleView: (date: DateValue) => boolean
   allowNonContiguousRanges: Ref<boolean>
-  highlightedRange: Ref<{ start: DateValue; end: DateValue } | null>
+  highlightedRange: Ref<{ start: DateValue, end: DateValue } | null>
   focusedValue: Ref<DateValue | undefined>
   lastPressedDateValue: Ref<DateValue | undefined>
   isSelected: (date: DateValue) => boolean
@@ -135,8 +135,8 @@ export type RangeCalendarRootEmits = {
   'update:startValue': [date: DateValue | undefined]
 }
 
-export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext] =
-  createContext<RangeCalendarRootContext>('RangeCalendarRoot')
+export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
+  = createContext<RangeCalendarRootContext>('RangeCalendarRoot')
 </script>
 
 <script setup lang="ts">
@@ -211,8 +211,8 @@ const {
   maximumDays,
 } = toRefs(props)
 
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement()
+const { primitiveElement, currentElement: parentElement }
+  = usePrimitiveElement()
 const dir = useDirection(propDir)
 const locale = useLocale(propLocale)
 
@@ -228,7 +228,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 const currentModelValue = computed(() =>
   isNullish(modelValue.value)
     ? { start: undefined, end: undefined }
-    : modelValue.value
+    : modelValue.value,
 )
 
 const defaultDate = getDefaultDate({
@@ -306,19 +306,19 @@ const {
 
 watch(modelValue, (_modelValue, _prevValue) => {
   if (
-    (!_prevValue?.start && _modelValue?.start) ||
-    !_modelValue ||
-    !_modelValue.start ||
-    (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
+    (!_prevValue?.start && _modelValue?.start)
+    || !_modelValue
+    || !_modelValue.start
+    || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
   ) {
     startValue.value = _modelValue?.start?.copy?.()
   }
 
   if (
-    (!_prevValue?.end && _modelValue.end) ||
-    !_modelValue ||
-    !_modelValue.end ||
-    (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
+    (!_prevValue?.end && _modelValue.end)
+    || !_modelValue
+    || !_modelValue.end
+    || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
   ) {
     endValue.value = _modelValue?.end?.copy?.()
   }
@@ -335,32 +335,35 @@ watch([startValue, endValue], ([_startValue, _endValue]) => {
   const value = currentModelValue.value
 
   if (
-    value &&
-    value.start &&
-    value.end &&
-    _startValue &&
-    _endValue &&
-    isEqualDay(value.start, _startValue) &&
-    isEqualDay(value.end, _endValue)
-  )
+    value
+    && value.start
+    && value.end
+    && _startValue
+    && _endValue
+    && isEqualDay(value.start, _startValue)
+    && isEqualDay(value.end, _endValue)
+  ) {
     return
+  }
 
   isEditing.value = true
   if (_startValue && _endValue) {
     isEditing.value = false
     if (
-      value.start &&
-      value.end &&
-      isEqualDay(value.start, _startValue) &&
-      isEqualDay(value.end, _endValue)
-    )
+      value.start
+      && value.end
+      && isEqualDay(value.start, _startValue)
+      && isEqualDay(value.end, _endValue)
+    ) {
       return
+    }
     if (isBefore(_endValue, _startValue)) {
       modelValue.value = {
         start: _endValue.copy(),
         end: _startValue.copy(),
       }
-    } else {
+    }
+    else {
       modelValue.value = {
         start: _startValue.copy(),
         end: _endValue.copy(),
@@ -425,7 +428,8 @@ provideRangeCalendarRootContext({
 })
 
 onMounted(() => {
-  if (initialFocus.value) handleCalendarInitialFocus(parentElement.value)
+  if (initialFocus.value)
+    handleCalendarInitialFocus(parentElement.value)
 })
 </script>
 
@@ -455,7 +459,10 @@ onMounted(() => {
         width: 1px;
       "
     >
-      <div role="heading" aria-level="2">
+      <div
+        role="heading"
+        aria-level="2"
+      >
         {{ fullCalendarLabel }}
       </div>
     </div>
