From cacaff8a95d505ad40120aa24357e17357f2fa69 Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Thu, 20 Jun 2024 17:07:48 +0200
Subject: [PATCH] feat: input type number to input text with inputmode numeric

---
 package.json                                 |  2 +-
 src/cypress/commands/fill/fillNumberInput.ts |  4 +-
 src/fields/NumberInput.tsx                   | 45 +++++---------------
 yarn.lock                                    | 10 ++---
 4 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 2214ff344..518481ccb 100644
--- a/package.json
+++ b/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",
diff --git a/src/cypress/commands/fill/fillNumberInput.ts b/src/cypress/commands/fill/fillNumberInput.ts
index 84faf9413..596cbf3dd 100644
--- a/src/cypress/commands/fill/fillNumberInput.ts
+++ b/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)
 }
diff --git a/src/fields/NumberInput.tsx b/src/fields/NumberInput.tsx
index 8ce692781..7c1e7a370 100644
--- a/src/fields/NumberInput.tsx
+++ b/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}
       />
diff --git a/yarn.lock b/yarn.lock
index 6ee486718..be80532b0 100644
--- a/yarn.lock
+++ b/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