From 5503369c9b11064ee665a6449025b055f63e7f39 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <bjlaa@proton.me>
Date: Tue, 3 Sep 2024 11:07:06 +0200
Subject: [PATCH 1/3] :bug: Fix input formatting issue when typing quickly

---
 src/components/form/question/NumberInput.tsx | 28 +++++++++-----------
 src/utils/debounce.ts                        | 11 ++++++++
 2 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/debounce.ts

diff --git a/src/components/form/question/NumberInput.tsx b/src/components/form/question/NumberInput.tsx
index 897fd848c..ef5f1603e 100644
--- a/src/components/form/question/NumberInput.tsx
+++ b/src/components/form/question/NumberInput.tsx
@@ -1,7 +1,7 @@
 import Trans from '@/components/translation/Trans'
-import { HTMLAttributes } from 'react'
-import { DebounceInput } from 'react-debounce-input'
-import { NumericFormat } from 'react-number-format'
+import { debounce } from '@/utils/debounce'
+import { HTMLAttributes, useState } from 'react'
+import { NumberFormatValues, NumericFormat } from 'react-number-format'
 import { twMerge } from 'tailwind-merge'
 
 type Props = {
@@ -15,11 +15,6 @@ type Props = {
   defaultValue?: string | number | null | undefined
 }
 
-function unformatNumber(number: string) {
-  // Supprimer les séparateurs de milliers
-  return Number(number.replace(/[^0-9.-]+/g, ''))
-}
-
 export default function NumberInput({
   unit,
   value = '',
@@ -29,27 +24,28 @@ export default function NumberInput({
   id,
   ...props
 }: HTMLAttributes<HTMLInputElement> & Props) {
-  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = event.target.value
+  const [localValue, setLocalValue] = useState(value)
+
+  const handleValueChange = debounce((values: NumberFormatValues) => {
+    setLocalValue(values.value)
 
-    if (inputValue === '') {
+    if (values.value === '') {
       setValue(undefined)
     } else {
-      setValue(unformatNumber(inputValue))
+      setValue(Number(values.value))
     }
-  }
+  }, 300)
 
   return (
     <div
       className={twMerge(`flex items-center justify-start gap-1`, className)}>
       <NumericFormat
-        value={isMissing ? '' : value}
+        value={isMissing ? '' : localValue}
         placeholder={isMissing ? '0' : ''}
         className={`focus:ring-primary max-w-[8rem] rounded-xl border-2 border-primary-200 bg-white p-2 text-right transition-colors focus:border-primary-700 focus:ring-2 md:max-w-full`}
-        customInput={DebounceInput}
         thousandSeparator={' '}
         allowNegative={false}
-        onChange={handleValueChange}
+        onValueChange={handleValueChange}
         id={id}
         {...props}
       />
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 000000000..5602b755d
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,11 @@
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func(...args), delay)
+  }
+}

From 06ddc685cc3151a0806b68da2b8a620370b778fa Mon Sep 17 00:00:00 2001
From: Benjamin Arias <bjlaa@proton.me>
Date: Tue, 3 Sep 2024 16:42:15 +0200
Subject: [PATCH 2/3] Update src/utils/debounce.ts

Co-authored-by: Paul Souche <paul@bettercallpaul.fr>
---
 src/utils/debounce.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 5602b755d..2411f2bd6 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,4 +1,4 @@
-export function debounce<T extends (...args: any[]) => void>(
+export function debounce<T extends (...args: unknown[]) => void>(
   func: T,
   delay: number
 ): (...args: Parameters<T>) => void {

From a4cf36a33ad69cc4a2efe36d1b4cb075629872e7 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <bjlaa@proton.me>
Date: Tue, 3 Sep 2024 17:26:33 +0200
Subject: [PATCH 3/3] Update src/utils/debounce.ts

Co-authored-by: Paul Souche <paul@bettercallpaul.fr>
---
 src/utils/debounce.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 2411f2bd6..5602b755d 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,4 +1,4 @@
-export function debounce<T extends (...args: unknown[]) => void>(
+export function debounce<T extends (...args: any[]) => void>(
   func: T,
   delay: number
 ): (...args: Parameters<T>) => void {