From 1a3a07144da3d5a9597d22194b57a819722ecdb7 Mon Sep 17 00:00:00 2001
From: Vladyslav Zuiev <31728119+vlzuiev@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:11:10 +0200
Subject: [PATCH 1/2] Change Number input type to text instead of number

There are multiple problems when it comes to number input e.g. there is empty input ref value when inputted value is not a number. So, in the context you will have null but on UI you'll still see value with overlaying label.
For more limitations you can read following article.
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
---
 .gitignore                                          | 1 +
 packages/ra-ui-materialui/src/input/NumberInput.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 30396811043..2adc54e5c3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ cypress/screenshots
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.history
\ No newline at end of file
diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx
index e149714b989..d01acade2b2 100644
--- a/packages/ra-ui-materialui/src/input/NumberInput.tsx
+++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx
@@ -137,7 +137,9 @@ export const NumberInput = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             className={clsx('ra-input', `ra-input-${source}`, className)}
-            type="number"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
             size="small"
             variant={variant}
             error={(isTouched || isSubmitted) && invalid}

From 36d6224fccaeb7ea1c48b37da386cd0100e86e1c Mon Sep 17 00:00:00 2001
From: Vladyslav Zuiev <31728119+vlzuiev@users.noreply.github.com>
Date: Sat, 6 Apr 2024 23:18:46 +0200
Subject: [PATCH 2/2] reset number input ref value when event value is empty

when inserting incorrect number value the input state is set to null.
However, input ref still has incorrect value and causes input label to overlay value which is still shown.
---
 .../src/input/NumberInput.tsx                 | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx
index d01acade2b2..21325c0974e 100644
--- a/packages/ra-ui-materialui/src/input/NumberInput.tsx
+++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx
@@ -42,6 +42,7 @@ export const NumberInput = ({
     readOnly,
     ...rest
 }: NumberInputProps) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
     const {
         field,
         fieldState: { error, invalid, isTouched },
@@ -58,7 +59,11 @@ export const NumberInput = ({
         readOnly,
         ...rest,
     });
-    const { onBlur: onBlurFromField } = field;
+    const {
+        ref: refFromField,
+        onBlur: onBlurFromField,
+        ...otherFieldProps
+    } = field;
 
     const inputProps = { ...overrideInputProps, step, min, max };
 
@@ -113,7 +118,10 @@ export const NumberInput = ({
         hasFocus.current = true;
     };
 
-    const handleBlur = () => {
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+        if (!event.currentTarget.value && inputRef.current) {
+            inputRef.current.value = '';
+        }
         if (onBlurFromField) {
             onBlurFromField();
         }
@@ -125,21 +133,23 @@ export const NumberInput = ({
     const renderHelperText =
         helperText !== false || ((isTouched || isSubmitted) && invalid);
 
-    const { ref, ...fieldWithoutRef } = field;
+    const setInputRefs = (instance: HTMLInputElement): void => {
+        refFromField(instance);
+        inputRef.current = instance;
+    };
+
     return (
         <TextField
             id={id}
-            {...fieldWithoutRef}
-            inputRef={ref}
+            {...otherFieldProps}
+            inputRef={setInputRefs}
             // use the locally controlled state instead of the react-hook-form field state
             value={value}
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}
             className={clsx('ra-input', `ra-input-${source}`, className)}
-            type="text"
-            inputmode="numeric"
-            pattern="[0-9]*"
+            type="number"
             size="small"
             variant={variant}
             error={(isTouched || isSubmitted) && invalid}