Déplacement des commits depuis main vers Checkout

Author: paullfhc

ssr-testing/app/checkbox/exemple_probleme.tsx

@@ -0,0 +1,30 @@
+// Ce fichier est une implémentation du problème de base
+// Il génère une erreur "infinite depth"
+// Pour tester le problème, il faut renommer le fichier en page.tsx
+
+'use client';
+
+import * as React from 'react';
+import * as Checkbox from '@radix-ui/react-checkbox';
+
+export default function Page() {
+  // État (booléen) associé à la checkbox et au div
+  const [isChecked, setIsChecked] = React.useState(false);
+
+  // Fonction pour alterner l’état de la checkbox
+  const handleCheckedChange = (newChecked: boolean) => {
+    console.log('Checkbox checked:', newChecked); // Affiche l'état dans la console
+    setIsChecked(newChecked);
+  };
+
+  return (
+    <form>
+      <div onClick={() => setIsChecked((prev) => !prev)}> {/* Alterne l’état*/}
+        <Checkbox.Root checked={isChecked} onCheckedChange={handleCheckedChange}> {/* Associe l'état de la checkbox et la fonction d'inversion de l'état*/}
+          [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
+        </Checkbox.Root>
+        <span>test</span>
+      </div>
+    </form>
+  );
+}

ssr-testing/app/checkbox/page.tsx

@@ -1,10 +1,42 @@
+// Ce fichier est une implémentation de la solution que nous proposons
+// Il dissocie l'état de la checkbox et du div
+// Le problème "infinite depth" est résolu tout en laissant le div cliquable
+
+'use client';
+
 import * as React from 'react';
 import * as Checkbox from '@radix-ui/react-checkbox';
 
 export default function Page() {
+  // État pour le div
+  const [isDivChecked, setIsDivChecked] = React.useState(false);
+
+  // État pour la case à cocher
+  const [isCheckboxChecked, setIsCheckboxChecked] = React.useState(false);
+
+  // Fonction pour alterner l’état du div
+  const handleDivClick = () => {
+    console.log('Div clicked:', !isDivChecked);
+    setIsDivChecked((prev) => !prev);
+  };
+
+  // Fonction pour alterner l’état de la checkbox
+  const handleCheckedChange = (newChecked: boolean) => {
+    console.log('Checkbox checked:', newChecked);
+    setIsCheckboxChecked(newChecked);
+  };
+
   return (
-    <Checkbox.Root>
-      [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
-    </Checkbox.Root>
+    <form>
+      <div onClick={handleDivClick}> {/* Alterne l’état du div */}
+        <Checkbox.Root 
+          checked={isCheckboxChecked} 
+          onCheckedChange={handleCheckedChange} // Alterne l’état de la checkbox
+        >
+          [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
+        </Checkbox.Root>
+        <span>test</span>
+      </div>
+    </form>
   );
-}
+}