feat: input type number to input text with inputmode numeric

package.json

@@ -94,7 +94,7 @@
     "browser-assert": "1.2.1",
     "chromatic": "6.19.9",
     "classnames": "2.3.2",
-    "cypress": "13.6.6",
+    "cypress": "13.10.0",
     "date-fns": "3.3.1",
     "dayjs": "1.11.10",
     "diacritics": "1.3.0",

src/cypress/commands/fill/fillNumberInput.ts

@@ -15,12 +15,12 @@ export function fillNumberInput(
 
   cy.wrap(fieldElement).scrollIntoView({ offset: { left: 0, top: -100 } })
 
-  cy.wrap(fieldElement).find('input[type="number"]').clear({ force }).wait(250)
+  cy.wrap(fieldElement).find('input[inputmode="numeric"]').clear({ force }).wait(250)
 
   // If `value` is undefined, we don't need to input anything
   if (!value) {
     return
   }
 
-  cy.wrap(fieldElement).find('input[type="number"]').type(String(value), { delay, force }).wait(250)
+  cy.wrap(fieldElement).find('input[inputmode="numeric"]').type(String(value), { delay, force }).wait(250)
 }

src/fields/NumberInput.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import { useCallback, useMemo, useRef, type FocusEvent } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { Input, type InputProps } from 'rsuite'
 import styled from 'styled-components'
 
@@ -13,7 +13,6 @@ import { FieldError } from '../elements/FieldError'
 import { Label } from '../elements/Label'
 import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 import { useKey } from '../hooks/useKey'
-import { usePreventWheelEvent } from '../hooks/usePreventWheelEvent'
 import { normalizeString } from '../utils/normalizeString'
 
 import type { CommonFieldStyleProps } from './shared/types'
@@ -46,9 +45,7 @@ export function NumberInput({
   isUndefinedWhenDisabled = false,
   label,
   name,
-  onBlur,
   onChange,
-  onFocus,
   readOnly = false,
   style,
   value,
@@ -62,43 +59,23 @@ export function NumberInput({
   const hasError = useMemo(() => Boolean(controlledError), [controlledError])
   const key = useKey([disabled, name])
 
-  const preventWheelEvent = usePreventWheelEvent(inputRef)
-
   const handleChange = useCallback(
     (nextValue: string) => {
       if (!onChange) {
         return
       }
+      if (nextValue === '') {
+        onChange(undefined)
+      }
 
       const normalizedNextValueAsString = nextValue && nextValue.length ? nextValue : undefined
       const nextValueAsNumber = Number(normalizedNextValueAsString)
-      const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined
-
-      onChange(normalizedNextValue)
-    },
-    [onChange]
-  )
-
-  const handleBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      event.target.removeEventListener('wheel', preventWheelEvent)
-
-      if (onBlur) {
-        onBlur(event)
-      }
-    },
-    [onBlur, preventWheelEvent]
-  )
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      event.target.addEventListener('wheel', preventWheelEvent)
-
-      if (onFocus) {
-        onFocus(event)
+      if (Number.isNaN(nextValueAsNumber)) {
+        return
       }
+      onChange(nextValueAsNumber)
     },
-    [onFocus, preventWheelEvent]
+    [onChange]
   )
 
   useFieldUndefineEffect(isUndefinedWhenDisabled && !!disabled, onChange)
@@ -119,11 +96,11 @@ export function NumberInput({
         $isTransparent={isTransparent}
         disabled={disabled}
         id={name}
-        onBlur={handleBlur}
+        inputMode="numeric"
+        maxLength="12"
         onChange={handleChange}
-        onFocus={handleFocus}
         readOnly={readOnly}
-        type="number"
+        type="text"
         value={value ?? ''}
         {...originalProps}
       />

yarn.lock

@@ -3219,7 +3219,7 @@ __metadata:
     browser-assert: "npm:1.2.1"
     chromatic: "npm:6.19.9"
     classnames: "npm:2.3.2"
-    cypress: "npm:13.6.6"
+    cypress: "npm:13.10.0"
     date-fns: "npm:3.3.1"
     dayjs: "npm:1.11.10"
     diacritics: "npm:1.3.0"
@@ -9791,9 +9791,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:13.6.6":
-  version: 13.6.6
-  resolution: "cypress@npm:13.6.6"
+"cypress@npm:13.10.0":
+  version: 13.10.0
+  resolution: "cypress@npm:13.10.0"
   dependencies:
     "@cypress/request": "npm:^3.0.0"
     "@cypress/xvfb": "npm:^1.2.4"
@@ -9839,7 +9839,7 @@ __metadata:
     yauzl: "npm:^2.10.0"
   bin:
     cypress: bin/cypress
-  checksum: 1f152ac3708fc35c822b6fe428c0856b568c9b2d3f03a22de0526b9f21d6c345139061ae3515a652538a9570a2a632516e4548b29b39843865b9c88288b2d668
+  checksum: ab53083b0557e6c1a1de0992563df91a75676113fc5d980fc36bdebeff4ea2eb2b66e67d504dbb36b4bdf33362aa738e98446f219755414e45135f48b607c1e3
   languageName: node
   linkType: hard