Merge pull request #13321 from colinux/fix-combo-sections

Tech: réapplique le patch react-dom pour le combobox par sections

Author: tchak

app/javascript/components/ComboBoxSections.test.tsx

@@ -0,0 +1,128 @@
+// Garde-fou contre le crash du perf-track dev de React 19.2 avec les sections
+// react-aria : `addObjectDiffToProperties` évalue un getter (`childNodes`) qui
+// lève une exception sur les nœuds de collection, gelant le composant à la
+// sélection / frappe. Ce comportement est neutralisé par le patch
+// `patches/react-dom@<version>.patch`. Ce test reproduit la MÊME structure que
+// ComboBox.tsx (AriaComboBox + Virtualizer + Collection de sections) et échoue
+// si le patch n'est plus appliqué (typiquement après un bump de react-dom dont
+// la clé `patchedDependencies` n'a pas suivi).
+import './process-env-shim';
+import { suite, test, expect, beforeEach, afterEach } from 'vitest';
+import { userEvent, page } from '@vitest/browser/context';
+import { useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import {
+  ComboBox as AriaComboBox,
+  ListBox,
+  ListBoxItem,
+  ListBoxSection,
+  Header,
+  Popover,
+  Input,
+  Button,
+  Collection,
+  Virtualizer,
+  ListLayout
+} from 'react-aria-components';
+
+type Item = { label: string; value: string };
+type Section = { label: string; items: Item[] };
+
+function buildSections(): Section[] {
+  return [
+    {
+      label: 'Préfectures',
+      items: [
+        { label: 'Préfecture de Paris', value: '75' },
+        { label: 'Préfecture du Rhône', value: '69' }
+      ]
+    },
+    {
+      label: 'Ministères',
+      items: [
+        { label: "Ministère de l'Intérieur", value: 'interieur' },
+        { label: 'Ministère de la Justice', value: 'justice' }
+      ]
+    }
+  ];
+}
+
+function ComboBoxWithSections() {
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const sections = buildSections();
+
+  return (
+    <AriaComboBox
+      aria-label="Démarches"
+      menuTrigger="focus"
+      selectedKey={selectedKey}
+      onSelectionChange={(key) =>
+        setSelectedKey(key == null ? null : String(key))
+      }
+      shouldFocusWrap
+    >
+      <Input aria-label="Démarches" />
+      <Button>open</Button>
+      <Popover>
+        <Virtualizer layout={ListLayout}>
+          <ListBox style={{ height: 300, width: 300 }}>
+            <Collection items={sections}>
+              {(section) => (
+                <ListBoxSection id={section.label}>
+                  <Header>{section.label}</Header>
+                  <Collection items={section.items}>
+                    {(item) => (
+                      <ListBoxItem id={item.value}>{item.label}</ListBoxItem>
+                    )}
+                  </Collection>
+                </ListBoxSection>
+              )}
+            </Collection>
+          </ListBox>
+        </Virtualizer>
+      </Popover>
+    </AriaComboBox>
+  );
+}
+
+suite('ComboBox sections (React 19 perf-track)', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  const errors: unknown[] = [];
+  const onError = (e: ErrorEvent) => errors.push(e.error ?? e.message);
+
+  beforeEach(() => {
+    errors.length = 0;
+    window.addEventListener('error', onError);
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    window.removeEventListener('error', onError);
+    root.unmount();
+    container.remove();
+  });
+
+  test('typing in a sectioned combobox does not freeze the component', async () => {
+    root.render(<ComboBoxWithSections />);
+
+    const input = page.getByRole('combobox', { name: 'Démarches' });
+    await userEvent.click(input);
+
+    // La frappe filtre la collection des sections, donc déclenche un re-render
+    // que le perf-track dev de React diffe (et donc l'évaluation des getters).
+    await userEvent.type(input, 'Rhô');
+
+    // laisser passer les passive effects (le perf-track tourne après le commit)
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // sans le patch : crash « childNodes is not supported » → input gelé sur « R »
+    await expect.element(input).toHaveValue('Rhô');
+    expect(
+      errors,
+      `erreurs non capturées: ${errors.map(String).join('; ')}`
+    ).toEqual([]);
+  });
+});

app/javascript/components/process-env-shim.ts

@@ -0,0 +1,9 @@
+// Shim pour les tests vitest en mode browser : react-aria référence
+// `process.env.NODE_ENV` (non défini dans le navigateur). Importé en premier
+// pour s'exécuter avant le chargement des dépendances react-aria.
+const g = globalThis as unknown as {
+  process?: { env: Record<string, string> };
+};
+g.process ??= { env: {} };
+g.process.env ??= {};
+g.process.env.NODE_ENV ??= 'development';

bun.lock

@@ -139,6 +139,6 @@
   },
   "patchedDependencies": {
     "@hotwired/turbo@7.3.0": "patches/@hotwired%2Fturbo@7.3.0.patch",
-    "react-dom@19.2.4": "patches/react-dom@19.2.4.patch"
+    "react-dom@19.2.7": "patches/react-dom@19.2.7.patch"
   }
 }

package.json

@@ -1,5 +1,5 @@
 diff --git a/cjs/react-dom-client.development.js b/cjs/react-dom-client.development.js
-index fa853b3a79413c8ddc553441ee259d4b34f59d69..0ccc4c8e33a401e4ea954e291c97c0983232ab36 100644
+index 8c860aca7db6a1ca74788209d100f10ae5f085fa..6e6ee0a9ec6aeaa1f2791b23e13a9f3d2a349095 100644
 --- a/cjs/react-dom-client.development.js
 +++ b/cjs/react-dom-client.development.js
 @@ -3965,8 +3965,13 @@