feat(NumberField): support invertWheelChange to invert the wheel change behavior (#1935)

kricsleo · web-flow · commit 9db3654bd20b · 2025-05-26T17:02:36.000+08:00
* fix(NumberField): correct wheel change behavior

* chore(tests): update tests for wheel events

* feat: support `invertWheelChange` to invert the wheel change behavior
diff --git a/docs/content/meta/NumberFieldRoot.md b/docs/content/meta/NumberFieldRoot.md
@@ -44,6 +44,12 @@
     'type': 'string',
     'required': false
   },
+  {
+    'name': 'invertWheelChange',
+    'description': '<p>When <code>true</code>, inverts the direction of the wheel change.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'locale',
     'description': '<p>The locale to use for formatting dates</p>\n',
diff --git a/packages/core/src/NumberField/NumberField.test.ts b/packages/core/src/NumberField/NumberField.test.ts
@@ -130,6 +130,27 @@ describe('numberField', () => {
         deltaY: 100, // Positive value for scrolling down
       })
       expect(input.value).toBe('11')
+      await fireEvent.wheel(input, {
+        deltaY: -100, // Negative value for scrolling up
+      })
+      expect(input.value).toBe('10')
+    })
+
+    it('should invert update value when `invertWheelChange` is `true`', async () => {
+      const { input } = setup({
+        defaultValue: 10,
+        invertWheelChange: true,
+      })
+      input.focus()
+      expect(input.value).toBe('10')
+      await fireEvent.wheel(input, {
+        deltaY: 100, // Positive value for scrolling down
+      })
+      expect(input.value).toBe('9')
+      await fireEvent.wheel(input, {
+        deltaY: -100, // Negative value for scrolling up
+      })
+      expect(input.value).toBe('10')
     })
 
     it('should not update value when `disableWheelChange` is `true`', async () => {
diff --git a/packages/core/src/NumberField/NumberFieldInput.vue b/packages/core/src/NumberField/NumberFieldInput.vue
@@ -35,9 +35,9 @@ function handleWheelEvent(event: WheelEvent) {
 
   event.preventDefault()
   if (event.deltaY > 0)
-    rootContext.handleIncrease()
+    rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease()
   else if (event.deltaY < 0)
-    rootContext.handleDecrease()
+    rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease()
 }
 
 onMounted(() => {
diff --git a/packages/core/src/NumberField/NumberFieldRoot.vue b/packages/core/src/NumberField/NumberFieldRoot.vue
@@ -25,6 +25,8 @@ export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {
   disabled?: boolean
   /** When `true`, prevents the value from changing on wheel scroll. */
   disableWheelChange?: boolean
+  /** When `true`, inverts the direction of the wheel change. */
+  invertWheelChange?: boolean
   /** Id of the element */
   id?: string
 }
@@ -46,6 +48,7 @@ interface NumberFieldRootContext {
   applyInputValue: (val: string) => void
   disabled: Ref<boolean>
   disableWheelChange: Ref<boolean>
+  invertWheelChange: Ref<boolean>
   max: Ref<number | undefined>
   min: Ref<number | undefined>
   isDecreaseDisabled: Ref<boolean>
@@ -72,7 +75,7 @@ const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   stepSnapping: true,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
-const { disabled, disableWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
+const { disabled, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
@@ -191,6 +194,7 @@ provideNumberFieldRootContext({
   applyInputValue,
   disabled,
   disableWheelChange,
+  invertWheelChange,
   max,
   min,
   isDecreaseDisabled,
