From d04452a5f5c45a6248e4877b24efb3ac84f495e2 Mon Sep 17 00:00:00 2001
From: Robin Lopez <robinlopez.contact@gmail.com>
Date: Mon, 26 Oct 2026 11:44:08 +0100
Subject: [PATCH] FSHSP-259 fix(forms): sync the model with browser autofill

---
 CHANGELOG.md                                  |  29 +++++
 docs/ROADMAP.md                               |  32 ++++++
 .../src/core/forms/browser-fill.test.tsx      |  31 ++++++
 .../src/core/forms/browser-fill.ts            |  26 +++++
 packages/ui-kit-react/src/core/forms/index.ts |   1 +
 .../forms/ui-autocomplete/ui-autocomplete.mdx |  10 ++
 .../ui-autocomplete/ui-autocomplete.test.tsx  |  87 +++++++++++++++
 .../forms/ui-autocomplete/ui-autocomplete.tsx |  59 ++++++++--
 .../src/forms/ui-datepicker/ui-datepicker.mdx |   8 +-
 .../ui-datepicker/ui-datepicker.test.tsx      |  46 ++++++++
 .../src/forms/ui-datepicker/ui-datepicker.tsx | 101 ++++++++++-------
 .../src/forms/ui-input-mask/ui-input-mask.mdx |   3 +
 .../ui-input-mask/ui-input-mask.test.tsx      |  43 ++++++++
 .../src/forms/ui-input-mask/ui-input-mask.tsx |  23 +++-
 .../forms/ui-input-number/ui-input-number.mdx |   4 +
 .../ui-input-number/ui-input-number.test.tsx  |  41 +++++++
 .../forms/ui-input-number/ui-input-number.tsx |  27 ++++-
 .../src/forms/ui-input-otp/ui-input-otp.mdx   |   7 +-
 .../forms/ui-input-otp/ui-input-otp.test.tsx  |  64 +++++++++++
 .../src/forms/ui-input-otp/ui-input-otp.tsx   |  32 ++++--
 .../src/forms/ui-input/ui-input.mdx           | 104 ++++++++++++++++++
 .../src/forms/ui-input/ui-input.test.tsx      |  68 ++++++++++++
 .../src/forms/ui-input/ui-input.tsx           |  14 ++-
 .../src/forms/ui-textarea/ui-textarea.mdx     |   5 +
 .../forms/ui-textarea/ui-textarea.test.tsx    |  20 ++++
 .../src/forms/ui-textarea/ui-textarea.tsx     |   7 ++
 .../src/styles/base/_browser-fill.scss        |  15 +++
 packages/ui-kit-react/src/styles/index.scss   |   1 +
 28 files changed, 836 insertions(+), 72 deletions(-)
 create mode 100644 packages/ui-kit-react/src/core/forms/browser-fill.test.tsx
 create mode 100644 packages/ui-kit-react/src/core/forms/browser-fill.ts
 create mode 100644 packages/ui-kit-react/src/styles/base/_browser-fill.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23d77aa..d3fed0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,35 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et le p
 
 ## [Unreleased]
 
+### Added
+
+- **`BROWSER_FILL_CLASS`, `announceBrowserFill` et `hasFocus`** dans `@4sh/ui-kit-react/forms`
+  (FSHSP-259), pour un champ maison : la classe et le gestionnaire `onAnimationStart` font
+  suivre au champ une valeur que le navigateur préremplit sans aucun événement. Une case sur
+  mesure de `ui-input-otp` reçoit `onAnimationStart` dans le contexte de `renderCell`.
+
+### Fixed
+
+- **Une valeur préremplie par le navigateur est prise en compte sans clic dans le champ**
+  (FSHSP-259). Quand le navigateur n'émettait aucun événement, la valeur s'affichait sans que
+  React la connaisse, et le rendu suivant l'écrasait, dans tous les champs. `styles.css` lance
+  désormais une animation sur `:-webkit-autofill`, qui fait recevoir au champ l'`input`
+  manquant : `ui-input`, `ui-textarea`, `ui-input-number`, `ui-input-mask`, `ui-input-otp`,
+  `ui-autocomplete` et `ui-datepicker` appellent `onValueChange` une seule fois, en mode
+  contrôlé comme non contrôlé. Une valeur écrite sans focus est traitée comme telle :
+  `ui-input-number` la formate aussitôt, `ui-datepicker` la valide sans attendre la sortie du
+  champ (et revient à la valeur précédente si ce n'est pas une date), `ui-input-otp` la
+  répartit sans prendre le focus, `ui-input-mask` ne place pas de curseur, `ui-autocomplete`
+  appelle `onComplete` sans ouvrir son panneau et, avec `forceSelection`, retient la
+  suggestion qui porte ce libellé dès qu'elle arrive, même après le flou que Chrome envoie au
+  champ rempli. Le `focus` que Chrome envoie à chaque
+  champ qu'il remplit n'ouvre plus le calendrier en `showOnFocus`, ne lance plus la recherche
+  en `completeOnFocus` et ne focalise plus une case de code. Dans les tests d'une application,
+  un `input` envoyé sans focus à `ui-datepicker` ou `ui-autocomplete` vaut désormais
+  remplissage : focaliser le champ pour simuler une frappe. Hors de portée : une valeur que
+  Chrome préremplit au chargement de la page reste illisible par JavaScript jusqu'à une
+  interaction.
+
 ## [0.3.0] - 2026-10-23
 
 ### Added
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index 315381b..25c77fa 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -686,6 +686,21 @@ Ne pas les repayer. Chacun est documenté sur place, dans le fichier concerné.
   frappe directe d'un déclencheur `<button>` n'en voit rien, et `shift+Equal` y produit une
   touche vide au lieu de « + ». Pour vérifier un raccourci, envoyer un vrai `KeyboardEvent`, ou
   passer par `userEvent` dans un test.
+- **La saisie automatique de Chrome se rejoue pour de vrai, pas les autres.** `Autofill.trigger`
+  du protocole DevTools remplit un formulaire de carte (`cc-name`, `cc-number`, `cc-exp`,
+  `cc-csc`) dans le Chrome système (`channel: 'chrome'`), pas dans le Chromium de Playwright :
+  page servie en HTTP, 1,5 s pour l'analyse du formulaire, champ déclencheur focalisé et dans
+  le même `<form>` que les champs à remplir. Chrome envoie alors à chaque champ rempli
+  `focus`, `keydown` (un `Event` nu), `input`, `change` et `blur`, sans jamais lui donner le
+  focus : un `onFocus` qui ouvre un panneau ou appelle `select()` réagit à ce faux focus.
+  Safari et Firefox ne se rejouent pas ; on simule en écrivant par le setter du prototype
+  (React ne voit pas l'écriture), puis en émettant l'événement voulu.
+- **Deux événements du même remplissage, un seul rendu entre eux, au mieux.** Une
+  `animationstart` est rendue avec une priorité ordinaire : un `change` qui la suit peut
+  arriver avant le rendu, et son gestionnaire lit encore la valeur d'avant. Comparer la valeur
+  au rendu ne protège donc pas d'une double notification. `announceBrowserFill` émet plutôt
+  l'`input` manquant : React suit lui-même la dernière valeur vue et ne rapporte jamais deux
+  fois la même. FSHSP-259.
 
 ---
 
@@ -2381,3 +2396,20 @@ removed » alors qu'il ne fait que retirer le `./` du chemin. Le chemin s'écrit
 sans. Après publication, npm a d'abord servi un paquet provisoire `0.0.0-stage` et un 404
 sur la `0.1.0` pendant quelques minutes (`docs/PUBLISHING.md`). Vérifié ensuite depuis le
 registre : installation dans un dossier vierge, `bin` lié, serveur MCP qui répond.
+
+### 2026-10-26 : la saisie automatique du navigateur
+
+FSHSP-259, pendant de FSHSP-258 côté Angular. Les défauts ont d'abord été reproduits sur le
+kit tel quel : vrai autofill Chrome par le protocole DevTools, et simulations sur Chromium,
+Firefox et WebKit. Le `onChange` de React couvrait déjà `input` et `change`. Restaient une
+valeur écrite sans événement, écrasée au rendu suivant dans **tous** les champs, contrôlés ou
+non ; le panneau de `ui-autocomplete` ouvert sous un champ sans focus ; le focus volé par
+`ui-input-otp` ; une date remplie jamais validée ; et le faux `focus` de Chrome, qui ouvrait le
+calendrier en `showOnFocus`.
+
+Le correctif tient dans `core/forms/browser-fill.ts` et une règle de `styles.css` : une
+animation sur `:-webkit-autofill` fait recevoir au champ l'`input` manquant. Chaque champ
+distingue ensuite une écriture sans focus (`hasFocus`) d'une frappe. Frappe et collage
+mesurés identiques avant et après, sur les trois moteurs. Reste un double appel préexistant,
+commun aux deux stacks : `ui-input-number` republie sa valeur à la sortie du champ, ce que
+Chrome déclenche aussi avec son faux `blur`.
diff --git a/packages/ui-kit-react/src/core/forms/browser-fill.test.tsx b/packages/ui-kit-react/src/core/forms/browser-fill.test.tsx
new file mode 100644
index 0000000..3996b51
--- /dev/null
+++ b/packages/ui-kit-react/src/core/forms/browser-fill.test.tsx
@@ -0,0 +1,31 @@
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { announceBrowserFill, hasFocus } from './browser-fill';
+
+test("announceBrowserFill émet l'input manquant, pour la seule animation d'autofill", async () => {
+  const onInput = vi.fn();
+  const screen = await render(
+    <input aria-label="Champ" onInput={onInput} onAnimationStart={announceBrowserFill} />,
+  );
+  const input = screen.container.querySelector('input')!;
+
+  input.dispatchEvent(
+    new AnimationEvent('animationstart', { animationName: 'ui-ripple-wave', bubbles: true }),
+  );
+  expect(onInput).not.toHaveBeenCalled();
+
+  input.dispatchEvent(
+    new AnimationEvent('animationstart', { animationName: 'ui-browser-fill', bubbles: true }),
+  );
+  expect(onInput).toHaveBeenCalledOnce();
+});
+
+test('hasFocus distingue le champ qui a le focus', async () => {
+  const screen = await render(<input aria-label="Champ" />);
+  const input = screen.container.querySelector('input')!;
+
+  expect(hasFocus(input)).toBe(false);
+  input.focus();
+  expect(hasFocus(input)).toBe(true);
+});
diff --git a/packages/ui-kit-react/src/core/forms/browser-fill.ts b/packages/ui-kit-react/src/core/forms/browser-fill.ts
new file mode 100644
index 0000000..9990822
--- /dev/null
+++ b/packages/ui-kit-react/src/core/forms/browser-fill.ts
@@ -0,0 +1,26 @@
+import type { AnimationEvent } from 'react';
+
+/** Marque un champ natif pour la règle `:-webkit-autofill` de la feuille globale. */
+export const BROWSER_FILL_CLASS = 'ui-browser-fill';
+
+const BROWSER_FILL_ANIMATION = 'ui-browser-fill';
+
+/** L'élément a-t-il le focus ? (fonctionne aussi dans une racine fantôme) */
+export function hasFocus(element: Element): boolean {
+  return (element.getRootNode() as Document | ShadowRoot).activeElement === element;
+}
+
+/**
+ * `onAnimationStart` d'un champ marqué `BROWSER_FILL_CLASS`. L'animation que la feuille
+ * globale lance sur `:-webkit-autofill` est le seul signe d'une valeur préremplie sans aucun
+ * événement, que le rendu suivant écraserait. Le champ reçoit alors l'`input` que le
+ * navigateur n'a pas émis : son `onChange` le traite comme une autre écriture, et React ne
+ * rapporte jamais deux fois la même valeur.
+ */
+export function announceBrowserFill(
+  event: AnimationEvent<HTMLInputElement | HTMLTextAreaElement>,
+): void {
+  if (event.animationName === BROWSER_FILL_ANIMATION) {
+    event.currentTarget.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+}
diff --git a/packages/ui-kit-react/src/core/forms/index.ts b/packages/ui-kit-react/src/core/forms/index.ts
index 14e521a..7036d67 100644
--- a/packages/ui-kit-react/src/core/forms/index.ts
+++ b/packages/ui-kit-react/src/core/forms/index.ts
@@ -5,6 +5,7 @@
 
 export { useControllableState, type UiControllableStateOptions } from './use-controllable-state';
 export { useUiField, joinIds, type UiFieldWiring } from './use-ui-field';
+export { BROWSER_FILL_CLASS, announceBrowserFill, hasFocus } from './browser-fill';
 export type { FieldSize, FieldLevel, FieldFloatLabel, UiFieldSharedProps } from './field-types';
 export {
   MASK_TOKENS,
diff --git a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.mdx b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.mdx
index d0417d5..6c3594c 100644
--- a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.mdx
+++ b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.mdx
@@ -60,6 +60,16 @@ libre.
 
 <Canvas of={AutocompleteStories.ForceSelection} />
 
+Une valeur que le navigateur écrit dans le champ sans que l'utilisateur y soit (saisie
+automatique) appelle `onComplete` aussitôt, **sans ouvrir le panneau** sous un champ où
+personne n'est. Avec `forceSelection`, elle n'attend pas de sortie du champ : la suggestion qui
+porte ce libellé est retenue dès que `suggestions` la contient, même quand une recherche
+asynchrone la renvoie après le flou que Chrome envoie au champ rempli. Tant qu'elle attend, la
+sortie du champ ne la juge pas : sans correspondance, le texte reste affiché et la valeur vide.
+`completeOnFocus` ignore le `focus` que Chrome envoie au champ qu'il remplit. Comportement
+commun aux champs : section « Saisie automatique du navigateur » de
+[`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Sélection multiple
 
 La valeur devient un tableau, rendu en puces retirables. `unique` refuse deux fois la même
diff --git a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.test.tsx b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.test.tsx
index 00ade28..0bc109b 100644
--- a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.test.tsx
@@ -530,3 +530,90 @@ test('le panneau attend sa position avant d’être peint', async () => {
     .forEach((animation) => animation.finish());
   expect(getComputedStyle(panneau(screen)).opacity).toBe('1');
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('une valeur écrite sans focus lance la recherche sans ouvrir le panneau', async () => {
+  const onComplete = vi.fn();
+  const onValueChange = vi.fn();
+  const screen = await render(<Demo onComplete={onComplete} onValueChange={onValueChange} />);
+
+  remplir(champ(screen), 'Lyon', 'input');
+
+  await expect.poll(() => onComplete.mock.calls).toEqual([['Lyon']]);
+  await new Promise((r) => setTimeout(r, 50));
+  expect(panneau(screen).matches(':popover-open')).toBe(false);
+  expect(onValueChange.mock.calls).toEqual([['Lyon']]);
+  expect(document.activeElement).not.toBe(champ(screen));
+});
+
+test('forceSelection retient une seule fois la suggestion qui porte le libellé prérempli', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Demo forceSelection onValueChange={onValueChange} />);
+
+  remplir(champ(screen), 'lyon', 'animationstart');
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['Lyon']]);
+  await expect.element(champ(screen)).toHaveValue('Lyon');
+  // Le flou que Chrome envoie ensuite ne la republie pas.
+  champ(screen).dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+  await new Promise((r) => setTimeout(r, 50));
+  expect(onValueChange).toHaveBeenCalledOnce();
+});
+
+test('completeOnFocus ignore le focus que Chrome envoie avec son autofill', async () => {
+  const onComplete = vi.fn();
+  const screen = await render(<Demo completeOnFocus onComplete={onComplete} />);
+
+  champ(screen).dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+  await new Promise((r) => setTimeout(r, 50));
+  expect(onComplete).not.toHaveBeenCalled();
+
+  champ(screen).focus();
+  await expect.poll(() => onComplete.mock.calls).toEqual([['']]);
+});
+
+test('forceSelection attend les suggestions asynchrones malgré le faux flou de Chrome', async () => {
+  const onValueChange = vi.fn();
+  function Lent() {
+    const [suggestions, setSuggestions] = useState<readonly unknown[]>([]);
+    return (
+      <UiAutocomplete
+        label="Ville"
+        delay={0}
+        forceSelection
+        suggestions={suggestions}
+        onValueChange={onValueChange}
+        onComplete={(query) =>
+          setTimeout(
+            () =>
+              setSuggestions(
+                VILLES.filter((v) => normalizeText(v).startsWith(normalizeText(query))),
+              ),
+            100,
+          )
+        }
+      />
+    );
+  }
+  const screen = await render(<Lent />);
+  const input = champ(screen);
+
+  remplir(input, 'lyon', 'input', 'change');
+  input.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['Lyon']]);
+  await expect.element(input).toHaveValue('Lyon');
+});
diff --git a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
index b80e5dc..27ae0c2 100644
--- a/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
+++ b/packages/ui-kit-react/src/forms/ui-autocomplete/ui-autocomplete.tsx
@@ -21,9 +21,12 @@ import { UiChip } from '../../informative/ui-chip';
 import { UiSpinner } from '../../informative/ui-spinner';
 import { useRovingTabIndex } from '../../core/focus';
 import {
+  BROWSER_FILL_CLASS,
   createOptionResolver,
   formatLabel,
+  hasFocus,
   normalizeText,
+  announceBrowserFill,
   useControllableState,
   useUiField,
   type OptionEntry,
@@ -229,6 +232,8 @@ export function UiAutocomplete({
   const searchTimer = useRef(0);
   /** Une requête a déjà été traitée : évite que `completeOnFocus` en refasse une. */
   const queryDirty = useRef(false);
+  /** `forceSelection` : texte écrit par le navigateur, en attente de la suggestion qui le porte. */
+  const pendingFill = useRef<string | null>(null);
 
   const uid = useId();
   const [open, setOpen] = useState(false);
@@ -279,6 +284,13 @@ export function UiAutocomplete({
     [group, groups, suggestions, resolver],
   );
 
+  /** Suggestion active dont le libellé vaut `text`, à la casse et aux accents près. */
+  const entryLabelled = useCallback(
+    (text: string) =>
+      flatEntries.find((e) => !e.disabled && normalizeText(e.label) === normalizeText(text.trim())),
+    [flatEntries],
+  );
+
   const rows = useMemo<AcRow[]>(() => {
     const out: AcRow[] = [];
     let index = 0;
@@ -571,9 +583,11 @@ export function UiAutocomplete({
   };
 
   // --- Saisie --------------------------------------------------------------
-  const onInput = (event: ChangeEvent<HTMLInputElement>) => {
-    const query = event.target.value;
+  const onQuery = (query: string, element: HTMLInputElement) => {
+    // Écrit par le navigateur sans focus : la recherche part aussitôt, panneau fermé.
+    const typed = hasFocus(element);
     setInputText(query);
+    pendingFill.current = !typed && forceSelection && query ? query : null;
 
     // Texte libre pendant la frappe, sauf avec `forceSelection` (une vraie suggestion
     // est attendue) et `multiple` (la requête ne touche jamais la sélection).
@@ -592,20 +606,28 @@ export function UiAutocomplete({
     }
 
     setFocusedIndex(-1);
+    if (!typed) {
+      onComplete?.(query);
+      return;
+    }
     searchTimer.current = window.setTimeout(() => runSearch(query), delay);
   };
 
+  const onInput = (event: ChangeEvent<HTMLInputElement>) =>
+    onQuery(event.target.value, event.target);
+
   /**
    * `forceSelection` : à la sortie du champ, un texte sans suggestion correspondante
    * est effacé, pour que le modèle ne contienne jamais de texte libre.
    */
   const validateForceSelection = useCallback(() => {
+    pendingFill.current = null;
     const text = inputText.trim();
     if (!text) return;
-    const match = flatEntries.find(
-      (e) => !e.disabled && normalizeText(e.label) === normalizeText(text),
-    );
+    const match = entryLabelled(text);
     if (match) {
+      // Déjà retenue (remplissage du navigateur) : la reprendre la publierait deux fois.
+      if (!multiple && resolver.equals(model, match.value)) return;
       selectEntry(match, false);
     } else if (multiple) {
       setInputText('');
@@ -614,13 +636,24 @@ export function UiAutocomplete({
       setInputText('');
       onClear?.();
     }
-  }, [inputText, flatEntries, selectEntry, multiple, commit, onClear]);
+  }, [inputText, entryLabelled, resolver, model, selectEntry, multiple, commit, onClear]);
+
+  // `forceSelection` applique à un remplissage du navigateur la règle de la sortie du champ,
+  // dès qu'une suggestion porte son libellé : aucune sortie du champ ne viendra l'appliquer.
+  useEffect(() => {
+    const text = pendingFill.current;
+    const match = text === null ? undefined : entryLabelled(text);
+    if (!match) return;
+    pendingFill.current = null;
+    selectEntry(match, false);
+  }, [inputText, entryLabelled, selectEntry]);
 
   const onInputBlur = (event: FocusEvent<HTMLInputElement>) => {
     const next = event.relatedTarget as Node | null;
     const inside =
       (next && anchorRef.current?.contains(next)) || (next && panelRef.current?.contains(next));
-    if (!inside && forceSelection) validateForceSelection();
+    // Un remplissage du navigateur attend sa suggestion : le faux flou de Chrome ne le juge pas.
+    if (!inside && forceSelection && pendingFill.current === null) validateForceSelection();
   };
 
   const onInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -708,6 +741,7 @@ export function UiAutocomplete({
 
   const clear = (event: MouseEvent) => {
     event.stopPropagation();
+    pendingFill.current = null;
     commit(multiple ? [] : null);
     setInputText('');
     onClear?.();
@@ -926,7 +960,11 @@ export function UiAutocomplete({
             }}
             id={field.inputId}
             type="text"
-            className={cx('ui-autocomplete-input', size === 'small' && '_small')}
+            className={cx(
+              'ui-autocomplete-input',
+              size === 'small' && '_small',
+              BROWSER_FILL_CLASS,
+            )}
             role="combobox"
             aria-haspopup="listbox"
             aria-autocomplete="list"
@@ -944,9 +982,12 @@ export function UiAutocomplete({
             disabled={disabled}
             readOnly={readOnly}
             onChange={onInput}
+            onAnimationStart={announceBrowserFill}
             onKeyDown={onInputKeyDown}
-            onFocus={() => {
+            onFocus={(event) => {
               if (disabled) return;
+              // Chrome envoie ce focus au champ qu'il remplit, sans le lui donner.
+              if (!hasFocus(event.currentTarget)) return;
               if (!queryDirty.current && completeOnFocus) runSearch(inputText);
             }}
             onBlur={onInputBlur}
diff --git a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.mdx b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.mdx
index 25152a8..d5cf542 100644
--- a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.mdx
+++ b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.mdx
@@ -155,6 +155,11 @@ chiffres marche pour construire, pas pour éditer.
 Le masque se réarme dès que le champ se lit vide, sans attendre un flou qui peut ne jamais
 venir.
 
+Une date préremplie par le navigateur (`autoComplete="bday"`) dans le champ sans focus est
+**validée aussitôt**, sans attendre de flou ni d'`Entrée` : la valeur est mise à jour et
+`onDateSelect` appelé. Un texte qui n'est pas une date fait revenir le champ à la valeur
+précédente. Comportement commun aux champs : section « Saisie automatique du navigateur » de [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 Un champ tapable est d'abord un champ texte : **un clic dedans n'ouvre pas le panneau**.
 Celui-ci avalerait les clics suivants, et corriger un seul segment à la souris deviendrait
 impossible. L'icône, `↓` et le clavier s'en chargent. `allowInput={false}`, `readOnly`,
@@ -242,7 +247,8 @@ Deux saveurs, selon `showOnFocus` :
 
 `showOnFocus` ouvre dès que le déclencheur prend le focus, au pointeur comme au clavier, mais
 **jamais sur un focus programmatique** : un `autofocus` ou un `focus()` d'application hôte ne
-doit pas faire surgir un calendrier que personne n'a demandé.
+doit pas faire surgir un calendrier que personne n'a demandé. Ni sur le `focus` que Chrome
+envoie à chaque champ rempli par sa saisie automatique, sans lui donner le focus.
 
 <Canvas of={DatepickerStories.ShowOnFocus} />
 
diff --git a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.test.tsx b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.test.tsx
index 38def74..cfa450b 100644
--- a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.test.tsx
@@ -775,3 +775,49 @@ test('le panneau attend sa position avant d’être peint', async () => {
     .forEach((animation) => animation.finish());
   expect(getComputedStyle(panneau(screen)).opacity).toBe('1');
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('une date écrite sans focus est validée sans attendre la sortie du champ', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Demo valueType="iso" onValueChange={onValueChange} />);
+
+  remplir(champ(screen), '14/02/1990', 'input');
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['1990-02-14']]);
+  await expect.element(champ(screen)).toHaveValue('14/02/1990');
+  expect(panneau(screen).matches(':popover-open')).toBe(false);
+});
+
+test("un texte prérempli qui n'est pas une date est retiré", async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Demo onValueChange={onValueChange} />);
+
+  remplir(champ(screen), '07/2030', 'animationstart');
+
+  await expect.element(champ(screen)).toHaveValue('');
+  expect(onValueChange).not.toHaveBeenCalled();
+});
+
+test('showOnFocus ignore le focus que Chrome envoie avec son autofill', async () => {
+  const screen = await render(<Demo showOnFocus />);
+
+  // Chrome : un keydown sur le champ rempli juste avant, puis ce focus, sans le focus.
+  document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', bubbles: true }));
+  champ(screen).dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+  await new Promise((r) => setTimeout(r, 50));
+
+  expect(panneau(screen).matches(':popover-open')).toBe(false);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
index bcc6b41..edc3501 100644
--- a/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
+++ b/packages/ui-kit-react/src/forms/ui-datepicker/ui-datepicker.tsx
@@ -16,6 +16,7 @@ import {
 import { UiButton } from '../../actions/ui-button';
 import { UiIcon, type UiIconSize } from '../../base/ui-icon';
 import {
+  BROWSER_FILL_CLASS,
   addDays,
   addMonths,
   autoFormatSegments,
@@ -24,6 +25,8 @@ import {
   extractMaskData,
   finalizeParsed,
   firstOfMonth,
+  hasFocus,
+  announceBrowserFill,
   isSameDay,
   normalizeDateInput,
   parseIsoDate,
@@ -1519,9 +1522,62 @@ export function UiDatepicker({
     [selectionMode, showTime, view, activeFields, parseTypedValue, setModel, toExternalValue],
   );
 
+  /**
+   * Lit et applique un texte ; revient a la valeur precedente si invalide. Rend `false`
+   * dans ce dernier cas.
+   */
+  const commitText = useCallback(
+    (raw: string | null) => {
+      if (triggerReadonly) return true;
+      if (raw === null) return true; // pas touche
+      // Quelle que soit l'issue, la saisie est terminee : le masque vif se rearme.
+      setMaskSuspended(false);
+      const text = raw.trim();
+      if (!text) {
+        setTypedValue(null);
+        if (hasValue) clear();
+        return true;
+      }
+      const picked = parseTypedValue(text, true);
+      if (!picked) {
+        setTypedValue(null); // retour en arriere : l'affichage reformate la valeur
+        return false;
+      }
+      commit(picked);
+      const first = Array.isArray(picked) ? picked[0] : picked;
+      // `onDateSelect` rapporte un jour choisi : sans objet pour une plage ou une liste tapees.
+      if (!Array.isArray(picked)) onDateSelect?.(serializeValue(picked));
+      if (first) {
+        setViewDate(firstOfMonth(first));
+        setFocusedDate(startOfDay(first));
+      }
+      return true;
+    },
+    [triggerReadonly, hasValue, clear, parseTypedValue, commit, onDateSelect, serializeValue],
+  );
+
+  const commitTyped = useCallback(() => commitText(typedValue), [commitText, typedValue]);
+
+  /**
+   * Texte ecrit par le navigateur sans focus : aucun flou ni Entree ne viendra le valider.
+   * Rejete, il cede la place a la valeur precedente, que le rendu ne reecrirait pas s'il
+   * n'a pas change.
+   */
+  const commitFill = useCallback(
+    (raw: string, el: HTMLInputElement) => {
+      if (!commitText(raw)) el.value = displayValue;
+    },
+    [commitText, displayValue],
+  );
+
   const onTriggerInput = useCallback(
     (raw: string) => {
       if (triggerReadonly) return;
+      const trigger = inputRef.current;
+      if (trigger && !hasFocus(trigger)) {
+        commitFill(raw, trigger);
+        return;
+      }
       if (!typingSlots) {
         setTypedValue(raw);
         // Champ vide a la main : enregistrer tout de suite, sans attendre flou ou Entree,
@@ -1564,44 +1620,8 @@ export function UiDatepicker({
       }
       if (open) previewTyped(text);
     },
-    [triggerReadonly, typingSlots, hasValue, clear, open, previewTyped, displayValue],
-  );
-
-  /** Lit et applique le texte tape ; revient a la valeur precedente si invalide. */
-  const commitTyped = useCallback(() => {
-    if (triggerReadonly) return;
-    if (typedValue === null) return; // pas touche
-    // Quelle que soit l'issue, la saisie est terminee : le masque vif se rearme.
-    setMaskSuspended(false);
-    const text = typedValue.trim();
-    if (!text) {
-      setTypedValue(null);
-      if (hasValue) clear();
-      return;
-    }
-    const picked = parseTypedValue(text, true);
-    if (picked) {
-      commit(picked);
-      const first = Array.isArray(picked) ? picked[0] : picked;
-      // `onDateSelect` rapporte un jour choisi : sans objet pour une plage ou une liste tapees.
-      if (!Array.isArray(picked)) onDateSelect?.(serializeValue(picked));
-      if (first) {
-        setViewDate(firstOfMonth(first));
-        setFocusedDate(startOfDay(first));
-      }
-    } else {
-      setTypedValue(null); // retour en arriere : l'affichage reformate la valeur
-    }
-  }, [
-    triggerReadonly,
-    typedValue,
-    hasValue,
-    clear,
-    parseTypedValue,
-    commit,
-    onDateSelect,
-    serializeValue,
-  ]);
+    [triggerReadonly, typingSlots, hasValue, clear, open, previewTyped, displayValue, commitFill],
+  );
 
   /**
    * Echap n'est consommee que quand elle ferme vraiment le panneau. Fermee, elle
@@ -2464,7 +2484,7 @@ export function UiDatepicker({
             id={field.inputId}
             name={name}
             type="text"
-            className="ui-datepicker-input"
+            className={cx('ui-datepicker-input', BROWSER_FILL_CLASS)}
             role="combobox"
             aria-haspopup="dialog"
             aria-expanded={open}
@@ -2485,9 +2505,12 @@ export function UiDatepicker({
             disabled={disabled}
             readOnly={triggerReadonly}
             onChange={(event) => onTriggerInput(event.currentTarget.value)}
+            onAnimationStart={announceBrowserFill}
             onFocus={(event) => {
               onFocus?.(event);
               if (disabled || readOnly) return;
+              // Chrome envoie ce focus au champ qu'il remplit, sans le lui donner.
+              if (!hasFocus(event.currentTarget)) return;
               if (showOnFocus && recentGesture.current && !suppressFocusOpen.current) {
                 openFrom('focus');
               }
diff --git a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.mdx b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.mdx
index 250de7f..ed356d1 100644
--- a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.mdx
+++ b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.mdx
@@ -81,6 +81,9 @@ valeur étant contrôlée par React.
 L'ancre utilisée est le nombre de caractères de donnée situés avant le curseur, jamais sa
 position absolue : celle-ci se décale dès qu'un littéral s'insère.
 
+Une valeur préremplie par le navigateur (téléphone, code postal) passe par le masque sans
+placer de curseur : écrite sans focus, elle n'a pas de position à restaurer. Comportement commun aux champs : section « Saisie automatique du navigateur » de [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Le moteur
 
 Le masquage lui-même vit dans `core/forms`, sous forme de fonctions pures sans état ni
diff --git a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.test.tsx b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.test.tsx
index 7b74006..acc1d06 100644
--- a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.test.tsx
@@ -86,3 +86,46 @@ test('le curseur se replace après le Nième caractère saisi', async () => {
 
   expect(input.selectionStart).toBe(4);
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('une valeur écrite sans focus passe au masque sans placer de curseur', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(
+    <UiInputMask label="Téléphone" mask="99 99 99 99 99" onValueChange={onValueChange} />,
+  );
+  const input = screen.container.querySelector('input')!;
+  const select = vi.spyOn(input, 'setSelectionRange');
+
+  remplir(input, '0612345678', 'input');
+
+  await expect.element(input).toHaveValue('06 12 34 56 78');
+  expect(onValueChange.mock.calls).toEqual([['06 12 34 56 78']]);
+  expect(select).not.toHaveBeenCalled();
+  expect(document.activeElement).not.toBe(input);
+});
+
+test("une valeur préremplie sans événement passe par l'animation d'autofill", async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(
+    <UiInputMask label="Téléphone" mask="99 99 99 99 99" onValueChange={onValueChange} />,
+  );
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, '0612345678', 'animationstart');
+
+  await expect.element(input).toHaveValue('06 12 34 56 78');
+  expect(onValueChange.mock.calls).toEqual([['06 12 34 56 78']]);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.tsx b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.tsx
index 0a9bd60..6cde08a 100644
--- a/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-mask/ui-input-mask.tsx
@@ -12,10 +12,13 @@ import {
 
 import { UiIcon, type UiIconSize } from '../../base/ui-icon';
 import {
+  BROWSER_FILL_CLASS,
   applyMaskTemplate,
   buildMaskSlots,
   caretForMask,
   extractMaskData,
+  hasFocus,
+  announceBrowserFill,
   parseMaskRanges,
   useControllableState,
   useUiField,
@@ -128,16 +131,18 @@ export function UiInputMask({
     pendingCaret.current = null;
   });
 
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const raw = event.target.value;
-    const caret = event.target.selectionStart ?? raw.length;
+  const onInput = (raw: string, element: HTMLInputElement) => {
+    const caret = element.selectionStart ?? raw.length;
     // Ancre stable : les caractères de donnée avant le curseur, insensibles aux littéraux insérés.
     const dataBeforeCaret = extractMaskData(raw.slice(0, caret)).length;
 
     const next = applyMaskTemplate(slots, extractMaskData(raw), slotChar);
     const nextDisplay = next.data.length ? next.display : '';
 
-    pendingCaret.current = caretForMask(next.tokenIndices, dataBeforeCaret, nextDisplay.length);
+    // Un remplissage écrit sans focus n'a pas de curseur à restaurer.
+    pendingCaret.current = hasFocus(element)
+      ? caretForMask(next.tokenIndices, dataBeforeCaret, nextDisplay.length)
+      : null;
     setModel(unmask ? next.data : next.masked);
   };
 
@@ -173,7 +178,7 @@ export function UiInputMask({
           if (typeof ref === 'function') ref(node);
           else if (ref) ref.current = node;
         }}
-        className={cx('ui-input-mask-native', size === 'small' && '_small')}
+        className={cx('ui-input-mask-native', size === 'small' && '_small', BROWSER_FILL_CLASS)}
         type="text"
         id={field.inputId}
         value={display}
@@ -184,7 +189,13 @@ export function UiInputMask({
         aria-label={field.ariaLabel}
         aria-describedby={field.describedBy}
         aria-invalid={field.ariaInvalid}
-        onChange={onChange}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          onInput(event.target.value, event.target)
+        }
+        onAnimationStart={(event) => {
+          rest.onAnimationStart?.(event);
+          announceBrowserFill(event);
+        }}
       />
     </UiField>
   );
diff --git a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.mdx b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.mdx
index 59c08f7..8ebf473 100644
--- a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.mdx
+++ b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.mdx
@@ -29,6 +29,10 @@ ni devise), et applique le formatage riche à la **sortie**, en même temps que
 C'est aussi ce qui distingue ce champ de `ui-input-mask` : là-bas l'affichage se déduit
 toujours de la valeur, ici le texte est un état à part le temps de la saisie.
 
+Une valeur préremplie par le navigateur dans le champ sans focus est lue et **formatée
+aussitôt**, puisqu'aucune sortie du champ ne viendra le faire ; elle n'est pas ramenée dans
+`[min, max]`, ce que seule la sortie du champ fait. Comportement commun aux champs : section « Saisie automatique du navigateur » de [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Ce n'est pas un `<input type="number">`
 
 Le champ natif refuse les séparateurs de la locale, avale les décimales différemment selon
diff --git a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.test.tsx b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.test.tsx
index bb8a936..cf62eca 100644
--- a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.test.tsx
@@ -144,3 +144,44 @@ test('sans borne, aucun attribut de borne n’est posé', async () => {
   expect(input.hasAttribute('aria-valuemin')).toBe(false);
   expect(input.hasAttribute('aria-valuemax')).toBe(false);
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('une valeur écrite sans focus est formatée aussitôt', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(
+    <UiInputNumber label="Surface" locale="en-US" useGrouping onValueChange={onValueChange} />,
+  );
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, '1234.5', 'input');
+
+  await expect.element(input).toHaveValue('1,234.5');
+  expect(onValueChange.mock.calls).toEqual([[1234.5]]);
+});
+
+test("une valeur préremplie sans événement passe par l'animation d'autofill", async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(
+    <UiInputNumber label="Surface" locale="en-US" onValueChange={onValueChange} />,
+  );
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, '42', 'animationstart');
+  await expect.element(input).toHaveValue('42');
+  remplir(input, '42', 'change');
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([[42]]);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.tsx b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.tsx
index 538ff53..406e57f 100644
--- a/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-number/ui-input-number.tsx
@@ -13,7 +13,14 @@ import {
 } from 'react';
 
 import { UiIcon } from '../../base/ui-icon';
-import { useControllableState, useUiField, type UiFieldSharedProps } from '../../core/forms';
+import {
+  BROWSER_FILL_CLASS,
+  hasFocus,
+  announceBrowserFill,
+  useControllableState,
+  useUiField,
+  type UiFieldSharedProps,
+} from '../../core/forms';
 import { cx } from '../../core/utils';
 import { UiField } from '../ui-field';
 
@@ -188,9 +195,11 @@ export function UiInputNumber({
   const atMax = model != null && max != null && model >= max;
   const atMin = model != null && min != null && model <= min;
 
-  const onInput = (event: ChangeEvent<HTMLInputElement>) => {
-    setText(event.target.value);
-    setModel(parse(event.target.value));
+  const onInput = (raw: string, element: HTMLInputElement) => {
+    const next = parse(raw);
+    setModel(next);
+    // Écrit par le navigateur sans focus : aucun flou ne viendra le formater.
+    setText(hasFocus(element) ? raw : next === null ? '' : format(next));
   };
 
   const onFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -287,7 +296,7 @@ export function UiInputNumber({
           if (typeof ref === 'function') ref(node);
           else if (ref) ref.current = node;
         }}
-        className={cx('ui-input-number-native', size === 'small' && '_small')}
+        className={cx('ui-input-number-native', size === 'small' && '_small', BROWSER_FILL_CLASS)}
         // `text` et non `number` : le natif refuse les séparateurs de la locale, perd des
         // décimales selon le navigateur et impose son pavé ; `inputMode` suffit au tactile.
         type="text"
@@ -305,7 +314,13 @@ export function UiInputNumber({
         aria-label={field.ariaLabel}
         aria-describedby={field.describedBy}
         aria-invalid={field.ariaInvalid}
-        onChange={onInput}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          onInput(event.target.value, event.target)
+        }
+        onAnimationStart={(event) => {
+          rest.onAnimationStart?.(event);
+          announceBrowserFill(event);
+        }}
         onKeyDown={onKeyDown}
         onFocus={onFocus}
         onBlur={onBlur}
diff --git a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.mdx b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.mdx
index 852ebce..9073904 100644
--- a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.mdx
+++ b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.mdx
@@ -26,7 +26,9 @@ remplies : c'est le moment où l'on valide, pas avant.
 La frappe avance seule à la case suivante, `Retour arrière` efface et recule, et un code
 **collé se répartit** sur les cases à partir de celle qui reçoit le collage. Le remplissage
 automatique du navigateur, qui pousse le code entier dans une seule case, se répartit de la
-même façon : les cases portent `autocomplete="one-time-code"`.
+même façon : les cases portent `autocomplete="one-time-code"`. Écrit dans une case sans focus,
+le code ne déplace pas le focus. Comportement commun aux champs : section « Saisie automatique
+du navigateur » de [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
 
 <Canvas of={OtpStories.Basic} />
 
@@ -52,6 +54,9 @@ quel, et c'est ce qui garde le comportement du groupe.
 ⚠️ Le contrôle rendu doit rester un `<input>` : c'est ce que le groupe retrouve dans le DOM
 pour faire glisser le focus de case en case.
 
+Pour qu'une case sur mesure suive aussi la saisie automatique du navigateur, lui poser
+`BROWSER_FILL_CLASS` (de `@4sh/ui-kit-react/forms`) en plus de `onAnimationStart` du contexte.
+
 <Canvas of={OtpStories.CustomCell} />
 
 Rien n'empêche d'insérer autre chose entre les cases, un séparateur par exemple, du moment
diff --git a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.test.tsx b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.test.tsx
index 37c4ed1..6b90c1b 100644
--- a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.test.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 
+import { BROWSER_FILL_CLASS } from '../../core/forms';
+
 import { UiInputOtp, type UiInputOtpProps } from './ui-input-otp';
 
 function Host(props: Partial<UiInputOtpProps>) {
@@ -353,3 +355,65 @@ test('les tailles posent leur modifieur', async () => {
     caseGrande.getBoundingClientRect().width,
   );
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('un code écrit sans focus est réparti sans déplacer le focus', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<Host length={4} integerOnly onValueChange={onValueChange} />);
+
+  remplir(cells(screen.container)[0]!, '4821', 'input');
+
+  await expect
+    .poll(() => cells(screen.container).map((c) => c.value))
+    .toEqual(['4', '8', '2', '1']);
+  expect(onValueChange.mock.calls).toEqual([['4821']]);
+  expect(cells(screen.container)).not.toContain(document.activeElement);
+});
+
+test('le focus que Chrome envoie avec son autofill ne focalise pas la case', async () => {
+  const screen = await render(<Host length={4} />);
+  const premiere = cells(screen.container)[0]!;
+  const select = vi.spyOn(premiere, 'select');
+
+  premiere.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+
+  expect(select).not.toHaveBeenCalled();
+  expect(document.activeElement).not.toBe(premiere);
+});
+
+test("une case personnalisée suit l'autofill par onAnimationStart", async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(
+    <Host
+      length={2}
+      onValueChange={onValueChange}
+      renderCell={(cell) => (
+        <input
+          className={`ma-case ${BROWSER_FILL_CLASS}`}
+          aria-label={`Case ${cell.index + 1}`}
+          value={cell.value}
+          tabIndex={cell.tabIndex}
+          onChange={cell.onChange}
+          onAnimationStart={cell.onAnimationStart}
+        />
+      )}
+    />,
+  );
+
+  remplir(screen.container.querySelector<HTMLInputElement>('.ma-case')!, '7', 'animationstart');
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['7']]);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.tsx b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.tsx
index 9b0dc3d..89f5b9b 100644
--- a/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input-otp/ui-input-otp.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
   useId,
   useState,
+  type AnimationEventHandler,
   type ChangeEvent,
   type ClipboardEvent,
   type ComponentPropsWithRef,
@@ -14,7 +15,12 @@ import {
   type ReactNode,
 } from 'react';
 
-import { useControllableState } from '../../core/forms';
+import {
+  BROWSER_FILL_CLASS,
+  hasFocus,
+  announceBrowserFill,
+  useControllableState,
+} from '../../core/forms';
 import { cx } from '../../core/utils';
 
 import './ui-input-otp.scss';
@@ -44,6 +50,8 @@ export interface UiInputOtpCellContext {
   onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
   onFocus: (event: FocusEvent<HTMLInputElement>) => void;
   onPaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+  /** Reads a code the browser autofills, on a cell carrying `BROWSER_FILL_CLASS`. */
+  onAnimationStart: AnimationEventHandler<HTMLInputElement>;
 }
 
 export interface UiInputOtpProps extends Omit<
@@ -175,7 +183,7 @@ export function UiInputOtp({
     if (joined.length === length && trimmed.every((char) => char !== '')) onComplete?.(joined);
   };
 
-  const fillFrom = (source: HTMLElement, from: number, chars: string) => {
+  const fillFrom = (source: HTMLElement, from: number, chars: string, moveFocus = true) => {
     const next = [...tokens];
     let cursor = from;
     for (const char of chars) {
@@ -183,17 +191,18 @@ export function UiInputOtp({
       next[cursor++] = char;
     }
     commit(next);
-    focusCell(source, Math.min(cursor, length - 1));
+    if (moveFocus) focusCell(source, Math.min(cursor, length - 1));
   };
 
-  const onCellChange = (event: ChangeEvent<HTMLInputElement>, index: number) => {
+  const onCellInput = (target: HTMLInputElement, index: number, inputType?: string) => {
     if (readOnly) return;
-    const target = event.currentTarget;
     const raw = sanitize(target.value);
+    // Écrit par le navigateur dans une case sans focus : le focus n'y est pas attiré.
+    const typed = hasFocus(target);
 
     // Plusieurs caractères (autofill, collage) : ils se répartissent sur les cases suivantes.
     if (raw.length > 1) {
-      fillFrom(target, index, raw);
+      fillFrom(target, index, raw, typed);
       return;
     }
 
@@ -201,12 +210,15 @@ export function UiInputOtp({
     next[index] = raw;
     target.value = raw; // reflète la valeur assainie
     commit(next);
+    if (!typed) return;
 
-    const inputType = (event.nativeEvent as InputEvent).inputType;
     if (raw) focusCell(target, index + 1);
     else if (inputType === 'deleteContentBackward') focusCell(target, index - 1);
   };
 
+  const onCellChange = (event: ChangeEvent<HTMLInputElement>, index: number) =>
+    onCellInput(event.currentTarget, index, (event.nativeEvent as InputEvent).inputType);
+
   const onCellKeyDown = (event: KeyboardEvent<HTMLInputElement>, index: number) => {
     if (event.altKey || event.ctrlKey || event.metaKey) return;
     const target = event.currentTarget;
@@ -250,6 +262,8 @@ export function UiInputOtp({
   };
 
   const onCellFocus = (event: FocusEvent<HTMLInputElement>, index: number) => {
+    // Chrome envoie ce focus à la case qu'il remplit sans la focaliser : `select()` la focaliserait.
+    if (!hasFocus(event.currentTarget)) return;
     setFocusedIndex(index);
     event.currentTarget.select();
   };
@@ -295,6 +309,7 @@ export function UiInputOtp({
           onKeyDown: (event) => onCellKeyDown(event, index),
           onFocus: (event) => onCellFocus(event, index),
           onPaste: (event) => onCellPaste(event, index),
+          onAnimationStart: announceBrowserFill,
         };
 
         if (renderCell) return <Fragment key={index}>{renderCell(context)}</Fragment>;
@@ -303,7 +318,7 @@ export function UiInputOtp({
           <input
             key={index}
             id={`${uid}-${index}`}
-            className="ui-input-otp-cell"
+            className={cx('ui-input-otp-cell', BROWSER_FILL_CLASS)}
             type={mask ? 'password' : 'text'}
             value={cellValue}
             maxLength={1}
@@ -320,6 +335,7 @@ export function UiInputOtp({
             onKeyDown={context.onKeyDown}
             onFocus={context.onFocus}
             onPaste={context.onPaste}
+            onAnimationStart={context.onAnimationStart}
           />
         );
       })}
diff --git a/packages/ui-kit-react/src/forms/ui-input/ui-input.mdx b/packages/ui-kit-react/src/forms/ui-input/ui-input.mdx
index 2911300..0837b0b 100644
--- a/packages/ui-kit-react/src/forms/ui-input/ui-input.mdx
+++ b/packages/ui-kit-react/src/forms/ui-input/ui-input.mdx
@@ -95,6 +95,110 @@ avec celui que vous fournissez, jamais à sa place.
 
 <Canvas of={InputStories.Invalid} />
 
+## Saisie automatique du navigateur
+
+Quand le navigateur préremplit un formulaire (adresse, e-mail, code reçu par SMS), il écrit
+dans des champs où l'utilisateur n'est pas. Selon le navigateur, il annonce la valeur par un
+`input`, par un `change` seul, ou par **aucun événement** : la valeur s'affiche alors sans que
+React la connaisse, et le rendu suivant d'un champ contrôlé l'écrase. Les champs du kit
+suivent ces trois cas : `onValueChange` est appelé **une seule fois**, sans attendre un clic
+dans le champ, en mode contrôlé comme non contrôlé. La frappe et le collage ne changent pas.
+
+Le cas sans événement passe par une animation que `styles.css` lance sur `:-webkit-autofill` :
+le champ reçoit alors l'`input` que le navigateur n'a pas émis. **La feuille `styles.css` doit
+donc être chargée**, ce qu'elle est déjà pour les jetons.
+
+Une valeur écrite sans focus est traitée comme un remplissage, pas comme une frappe :
+
+<table className="doc-table">
+  <thead>
+    <tr>
+      <th>Champ</th>
+      <th>Valeur préremplie</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>ui-input</code>, <code>ui-textarea</code>
+      </td>
+      <td>Reprise telle quelle.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-input-number</code>
+      </td>
+      <td>Lue puis formatée aussitôt : aucune sortie du champ ne viendra le faire.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-input-mask</code>
+      </td>
+      <td>Passée au masque, sans placer de curseur.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-input-otp</code>
+      </td>
+      <td>Répartie dans les cases sans prendre le focus.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-datepicker</code>
+      </td>
+      <td>
+        Validée sans attendre la sortie du champ ; si ce n'est pas une date, le champ revient à
+        la valeur précédente.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>ui-autocomplete</code>
+      </td>
+      <td>
+        Prise comme texte libre, <code>onComplete</code> appelé aussitôt, panneau fermé. Avec{' '}
+        <code>forceSelection</code>, la suggestion qui porte ce libellé est retenue dès qu'elle
+        arrive.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Chrome envoie aussi, à chaque champ qu'il remplit, un `focus` qui ne lui donne pas le focus.
+Les comportements liés au focus l'ignorent : `showOnFocus` de `ui-datepicker`,
+`completeOnFocus` de `ui-autocomplete`, la sélection d'une case de `ui-input-otp`.
+
+Pour guider le navigateur, renseigner `autoComplete` (`name`, `email`, `tel`, `postal-code`,
+`bday`…) et `name` sur le champ.
+
+> **À prévoir côté application.** `onValueChange` (et `onOptionSelect` avec `forceSelection`)
+> peut être appelé sans geste de l'utilisateur : un gestionnaire qui appelle une API ou remplit
+> d'autres champs doit le tolérer. Dans les tests, un `input` envoyé à un champ sans focus vaut
+> remplissage : focaliser le champ avant de simuler une frappe (`userEvent.type` ou `fill()` de
+> Playwright le font déjà). Hors de portée : Chrome garde illisible par JavaScript une valeur
+> qu'il préremplit au chargement de la page, jusqu'à une interaction.
+
+### Dans un champ maison
+
+Un champ bâti sur `@4sh/ui-kit-react/forms` obtient le même comportement : poser
+`BROWSER_FILL_CLASS` sur l'élément natif et brancher `announceBrowserFill` sur son
+`onAnimationStart`. `hasFocus(element)` distingue une frappe d'une valeur écrite sans focus,
+par exemple pour ne pas ouvrir de panneau.
+
+```tsx
+import { BROWSER_FILL_CLASS, announceBrowserFill, hasFocus } from '@4sh/ui-kit-react/forms';
+
+<input
+  className={cx('mon-champ', BROWSER_FILL_CLASS)}
+  value={text}
+  onChange={(event) => {
+    setText(event.target.value);
+    if (hasFocus(event.target)) openPanel();
+  }}
+  onAnimationStart={announceBrowserFill}
+/>;
+```
+
 ## Theming
 
 Le champ délègue l'essentiel de son apparence à `ui-field` : les points d'extension de la
diff --git a/packages/ui-kit-react/src/forms/ui-input/ui-input.test.tsx b/packages/ui-kit-react/src/forms/ui-input/ui-input.test.tsx
index dec970f..e407586 100644
--- a/packages/ui-kit-react/src/forms/ui-input/ui-input.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input/ui-input.test.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 
@@ -25,3 +26,70 @@ test('contrôlé : le champ reste sur la valeur du parent', async () => {
   await expect.element(input).toHaveValue('imposé');
   expect(onValueChange).toHaveBeenCalled();
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+/** Écrit comme le navigateur (setter natif, que React ne voit pas), puis émet `evenements`. */
+function remplir(el: HTMLInputElement, texte: string, ...evenements: string[]) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(el, texte);
+  for (const type of evenements) {
+    el.dispatchEvent(
+      type === 'animationstart'
+        ? new AnimationEvent(type, { animationName: 'ui-browser-fill', bubbles: true })
+        : new Event(type, { bubbles: true }),
+    );
+  }
+}
+
+test('une valeur préremplie sans événement est prise en compte et survit au rendu suivant', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<UiInput label="Nom" onValueChange={onValueChange} />);
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, 'Ada', 'animationstart');
+  await expect.element(input).toHaveValue('Ada');
+  await screen.rerender(<UiInput label="Nom" onValueChange={onValueChange} />);
+
+  await expect.element(input).toHaveValue('Ada');
+  expect(onValueChange.mock.calls).toEqual([['Ada']]);
+});
+
+test("un remplissage annoncé par l'animation puis par change ne notifie qu'une fois", async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<UiInput label="Nom" onValueChange={onValueChange} />);
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, 'Ada', 'animationstart');
+  await expect.element(input).toHaveValue('Ada');
+  remplir(input, 'Ada', 'change');
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['Ada']]);
+});
+
+test('contrôlé : un remplissage sans événement remonte au parent', async () => {
+  function Parent() {
+    const [nom, setNom] = useState('');
+    return (
+      <>
+        <UiInput label="Nom" value={nom} onValueChange={setNom} />
+        <output>{nom}</output>
+      </>
+    );
+  }
+  const screen = await render(<Parent />);
+  const input = screen.container.querySelector('input')!;
+
+  remplir(input, 'Ada', 'animationstart');
+
+  await expect.element(screen.container.querySelector('output')!).toHaveTextContent('Ada');
+  await expect.element(input).toHaveValue('Ada');
+});
+
+test("l'animation d'autofill de l'appelant reste appelée", async () => {
+  const onAnimationStart = vi.fn();
+  const screen = await render(<UiInput label="Nom" onAnimationStart={onAnimationStart} />);
+
+  remplir(screen.container.querySelector('input')!, 'Ada', 'animationstart');
+
+  expect(onAnimationStart).toHaveBeenCalledOnce();
+});
diff --git a/packages/ui-kit-react/src/forms/ui-input/ui-input.tsx b/packages/ui-kit-react/src/forms/ui-input/ui-input.tsx
index c3b9d3e..784a2c1 100644
--- a/packages/ui-kit-react/src/forms/ui-input/ui-input.tsx
+++ b/packages/ui-kit-react/src/forms/ui-input/ui-input.tsx
@@ -3,7 +3,13 @@
 import type { ChangeEvent, ComponentPropsWithRef, MouseEvent, ReactNode, Ref } from 'react';
 
 import { UiIcon, type UiIconSize } from '../../base/ui-icon';
-import { useControllableState, useUiField, type UiFieldSharedProps } from '../../core/forms';
+import {
+  BROWSER_FILL_CLASS,
+  announceBrowserFill,
+  useControllableState,
+  useUiField,
+  type UiFieldSharedProps,
+} from '../../core/forms';
 import { cx } from '../../core/utils';
 import { UiField } from '../ui-field';
 
@@ -169,7 +175,7 @@ export function UiInput({
       <input
         {...rest}
         ref={ref}
-        className={cx('ui-input-native', size === 'small' && '_small')}
+        className={cx('ui-input-native', size === 'small' && '_small', BROWSER_FILL_CLASS)}
         type={type}
         id={field.inputId}
         value={text}
@@ -183,6 +189,10 @@ export function UiInput({
         aria-invalid={field.ariaInvalid}
         // `rest.onInput` est déjà attaché par le spread : le rechaîner le ferait tirer deux fois.
         onChange={(event: ChangeEvent<HTMLInputElement>) => setText(event.target.value)}
+        onAnimationStart={(event) => {
+          rest.onAnimationStart?.(event);
+          announceBrowserFill(event);
+        }}
       />
     </UiField>
   );
diff --git a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.mdx b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.mdx
index 3c90a42..889b0b2 100644
--- a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.mdx
+++ b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.mdx
@@ -44,6 +44,11 @@ décrivent le champ, et remplacer l'un par l'autre en perdrait un. Le dépasseme
 `maxLength` n'est atteignable que par programme : la saisie est bornée par le navigateur :
 mais il est signalé quand il arrive, plutôt que d'afficher un compte faux.
 
+## Saisie automatique
+
+Une adresse préremplie par le navigateur met à jour la valeur sans clic dans le champ, même
+quand le navigateur n'émet aucun événement. Comportement commun aux champs : section « Saisie automatique du navigateur » de [`ui-input`](?path=/docs/components-ui-forms-ui-input--docs).
+
 ## Theming
 
 Le champ délègue l'essentiel de son apparence à `ui-field` : les points d'extension de la
diff --git a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.test.tsx b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.test.tsx
index fded4bd..feb95ca 100644
--- a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.test.tsx
+++ b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.test.tsx
@@ -53,3 +53,23 @@ test('la coquille est en mode multiligne', async () => {
 
   expect(screen.container.querySelector('.ui-field')!.className).toContain('_multiline');
 });
+
+// --- Saisie automatique du navigateur -------------------------------------
+
+test('une adresse préremplie sans événement est prise en compte une seule fois', async () => {
+  const onValueChange = vi.fn();
+  const screen = await render(<UiTextarea label="Adresse" onValueChange={onValueChange} />);
+  const area = screen.container.querySelector('textarea')!;
+
+  Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(
+    area,
+    '12 rue',
+  );
+  area.dispatchEvent(
+    new AnimationEvent('animationstart', { animationName: 'ui-browser-fill', bubbles: true }),
+  );
+  await expect.element(area).toHaveValue('12 rue');
+  area.dispatchEvent(new Event('change', { bubbles: true }));
+
+  await expect.poll(() => onValueChange.mock.calls).toEqual([['12 rue']]);
+});
diff --git a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.tsx b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.tsx
index 8ed84ef..8be8726 100644
--- a/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.tsx
+++ b/packages/ui-kit-react/src/forms/ui-textarea/ui-textarea.tsx
@@ -11,7 +11,9 @@ import {
 } from 'react';
 
 import {
+  BROWSER_FILL_CLASS,
   joinIds,
+  announceBrowserFill,
   useControllableState,
   useUiField,
   type UiFieldSharedProps,
@@ -173,6 +175,7 @@ export function UiTextarea({
           'ui-textarea-native',
           size === 'small' && '_small',
           autoResize && '_auto-resize',
+          BROWSER_FILL_CLASS,
         )}
         style={{ resize: autoResize ? 'none' : resize, ...rest.style }}
         id={field.inputId}
@@ -187,6 +190,10 @@ export function UiTextarea({
         aria-describedby={describedBy}
         aria-invalid={field.ariaInvalid}
         onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setText(event.target.value)}
+        onAnimationStart={(event) => {
+          rest.onAnimationStart?.(event);
+          announceBrowserFill(event);
+        }}
       />
     </UiField>
   );
diff --git a/packages/ui-kit-react/src/styles/base/_browser-fill.scss b/packages/ui-kit-react/src/styles/base/_browser-fill.scss
new file mode 100644
index 0000000..8974b82
--- /dev/null
+++ b/packages/ui-kit-react/src/styles/base/_browser-fill.scss
@@ -0,0 +1,15 @@
+// =====================================================================
+// Browser fill: an animation started on `:-webkit-autofill`, the only sign of a value
+// the browser autofills without any event. Fields marked `.ui-browser-fill` read it in
+// `onAnimationStart` (`core/forms/browser-fill.ts`).
+// =====================================================================
+
+.ui-browser-fill:-webkit-autofill {
+  animation: ui-browser-fill 0s;
+}
+
+@keyframes ui-browser-fill {
+  from {
+    opacity: 1;
+  }
+}
diff --git a/packages/ui-kit-react/src/styles/index.scss b/packages/ui-kit-react/src/styles/index.scss
index 3a72ff2..0b6fe63 100644
--- a/packages/ui-kit-react/src/styles/index.scss
+++ b/packages/ui-kit-react/src/styles/index.scss
@@ -9,4 +9,5 @@
 @use 'base/typography';
 @use 'base/motion';
 @use 'base/ripple';
+@use 'base/browser-fill';
 @use 'utils/helpers'; // global utility classes (.text-center, .no-margin…)