demo · v147

Refill flow

Browsers autofill country first; only then does the form know whether to ask for a US state, a UK county, or a Brazilian neighbourhood. The new autofill event lets a page inspect the values about to land, mutate the form, and call event.refill() to ask the browser to try again with the new field set.

Origin trial / behind a flag: the autofill event and the refill() method ship behind chrome://flags/#enable-experimental-web-platform-features in Chrome 147. This page attempts the API and degrades to manual mutation.

Open the demo, focus the first field and pick a saved address from Chrome's autofill menu. Watch the log: country lands first, the page injects the region-specific extras, then refill() asks Chrome to fill the new fields with the same address record.

Live event log

What's happening

  1. Listener on form for the new autofill event.
  2. Inspect event.autofillValues for the country field.
  3. Mutate the form: inject US state, DE street-name+house-number, BR neighborhood, etc.
  4. Call event.refill() — the browser re-runs autofill against the new fields.
  5. On the second dispatch event.refill is null — the spec's loop guard.
form.addEventListener('autofill', (event) => {
  const country = event.autofillValues
    .find(([el]) => el.name === 'country')?.[1];

  if (country && !regionInjected) {
    injectRegionFields(country);   // mutate DOM
    regionInjected = true;
    event.refill?.();              // ask browser for another pass
  }
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗