fix: Passing floats to the input being broken

src/app/layout.tsx

@@ -53,6 +53,7 @@ export const marianne = localFont({
 export default async function RootLayout({ children }: PropsWithChildren) {
   const lang = currentLocale()
   const region = await getGeolocation()
+
   const migrationInstructions = await getMigrationInstructions()
 
   return (

src/components/form/question/NumberInput.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import Trans from '@/components/translation/Trans'
 import { useLocale } from '@/hooks/useLocale'
-import { HTMLAttributes } from 'react'
+import { HTMLAttributes, useCallback, useEffect, useState } from 'react'
 import { DebounceInput } from 'react-debounce-input'
 import { twMerge } from 'tailwind-merge'
 
@@ -24,43 +26,40 @@ export default function NumberInput({
   id,
   ...props
 }: HTMLAttributes<HTMLInputElement> & Props) {
+  const [formattedValue, setFormattedValue] = useState('')
+
   const locale = useLocale()
 
-  function formatNumber(number: number) {
-    return number.toLocaleString(locale, {
-      maximumFractionDigits: 1,
-    })
-  }
+  const formatNumberWithSpaces = useCallback(
+    (number: number) => {
+      return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      }).format(number)
+    },
+    [locale]
+  )
 
-  function unformatNumber(number: string) {
-    // Supprimer les séparateurs de milliers
-    return Number(number.replace(/[^0-9.-]+/g, ''))
+  const unformatNumber = (formattedNumber: string) => {
+    return Number(formattedNumber.replace(/\s+/g, '').replace(/,/g, '.'))
   }
 
-  function handleInput(event: React.ChangeEvent<HTMLInputElement>) {
-    if (!event.target) return
-
-    const { value } = event.target
+  useEffect(() => {
+    setFormattedValue(
+      formatNumberWithSpaces(Number(`${value}`.replace(/\s+/g, '')))
+    )
+  }, [value, formatNumberWithSpaces])
 
-    // Prevent the user from typing non-numeric characters
-    // with a regex match
-    const match = value.match(/[^0-9.-]+/g)
+  const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const inputValue = (event.target as HTMLInputElement).value
 
-    if (match) {
-      event.target.value = value.replace(match[0], '')
-      return
+    if (inputValue === '') {
+      setValue(undefined)
+    } else {
+      setValue(unformatNumber(inputValue))
     }
-
-    // Format the number as the user types
-    const inputValue = event.target.value
-    const formattedValue = formatNumber(Number(inputValue))
-
-    // Update the input value
-    event.target.value = formattedValue
   }
 
-  const formattedValue = formatNumber(Number(value))
-
   return (
     <div
       className={twMerge(`flex items-center justify-start gap-1`, className)}>
@@ -71,16 +70,7 @@ export default function NumberInput({
         min={min}
         value={isMissing ? '' : formattedValue}
         placeholder={isMissing ? formattedValue ?? '0' : '0'}
-        onInput={handleInput}
-        onChange={(event) => {
-          const inputValue = (event.target as HTMLInputElement).value
-
-          if (inputValue === '') {
-            setValue(undefined)
-          } else {
-            setValue(unformatNumber(inputValue))
-          }
-        }}
+        onChange={handleInput}
         id={id}
         {...props}
       />