Keep tablet keyboard open between wizard fields

src/components/seller-wizard/SellerWizard.tsx

@@ -139,6 +139,7 @@ export function SellerWizard() {
     codePostal: '',
   })
   const touchStart = useRef<{ x: number; y: number; time: number } | null>(null)
+  const activeClientInputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
     loadClients()
@@ -176,6 +177,11 @@ export function SellerWizard() {
     }
   }, [createClientOpen])
 
+  useEffect(() => {
+    if (!createClientOpen) return
+    focusActiveClientInput()
+  }, [clientFieldIndex, createClientOpen])
+
   const filteredClients = useMemo(() => {
     const query = clientSearch.toLowerCase().trim()
     if (!query) return clients.slice(0, 20)
@@ -260,11 +266,20 @@ export function SellerWizard() {
     setError('')
     if (clientFieldIndex < clientFields.length - 1) {
       setClientFieldIndex((index) => index + 1)
+      focusActiveClientInput()
     } else {
       createClient()
     }
   }
 
+  function focusActiveClientInput() {
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        activeClientInputRef.current?.focus({ preventScroll: true })
+      })
+    })
+  }
+
   async function createClient() {
     setLoading(true)
     setError('')
@@ -425,6 +440,7 @@ export function SellerWizard() {
         nextClientField()
       } else {
         setClientFieldIndex((index) => Math.max(0, index - 1))
+        focusActiveClientInput()
       }
     }
 
@@ -553,6 +569,7 @@ export function SellerWizard() {
                     <div className="mt-4 grid grid-cols-[minmax(0,1fr)_auto] gap-3">
                       <Input
                         id={currentField.key}
+                        ref={activeClientInputRef}
                         value={newClient[currentField.key] || ''}
                         onChange={(event) =>
                           setNewClient({ ...newClient, [currentField.key]: event.target.value })
@@ -572,6 +589,7 @@ export function SellerWizard() {
                       />
                       <Button
                         className={`${keyboardOpen ? 'h-16 px-5' : 'h-20 px-6'} text-xl`}
+                        onPointerDown={(event) => event.preventDefault()}
                         onClick={nextClientField}
                         disabled={loading}
                       >
@@ -597,7 +615,11 @@ export function SellerWizard() {
                     variant="outline"
                     className={`${keyboardOpen ? 'h-12 text-base' : 'h-16 text-xl'}`}
                     disabled={clientFieldIndex === 0}
-                    onClick={() => setClientFieldIndex((index) => Math.max(0, index - 1))}
+                    onPointerDown={(event) => event.preventDefault()}
+                    onClick={() => {
+                      setClientFieldIndex((index) => Math.max(0, index - 1))
+                      focusActiveClientInput()
+                    }}
                   >
                     <ArrowLeft className="h-6 w-6" />
                     Retour
@@ -605,6 +627,7 @@ export function SellerWizard() {
                   <Button
                     variant="outline"
                     className={`${keyboardOpen ? 'h-12 text-base' : 'h-16 text-xl'}`}
+                    onPointerDown={(event) => event.preventDefault()}
                     onClick={nextClientField}
                     disabled={loading}
                   >