I tried to find examples where the formStateRestoreCallback lifecycle hook could return autocomplete as the second reason argument, but I didn't find anything.

Here is a quote from the specification:

When user agent updates a form-associated custom element's value on behalf of a user or as part of navigation, its formStateRestoreCallback is called, given the new state and a string indicating a reason, "autocomplete" or "restore", as arguments.

To get the reason with restore you just need to refresh the page with a certain custom element on the page (don't fet to use setFormValue)

customElements.define(
  "my-input",
  class extends HTMLElement {
    constructor() {
      super();
      this.internals_ = this.attachInternals();
      this.internals_.setFormValue("sendData", "localData");
    }
    static get formAssociated() {
      return true;
    }
    connectedCallback() {
      console.log("connectedCallback has been invoked");
    }
    formResetCallback() {
      console.log("formResetCallback has been invoked");
    }
    formStateRestoreCallback(state, mode){
      console.log("formStateRestoreCallback:", state, mode);
    }
  }
);

but what do you need to do to get autocomplete?

Does anyone know if this thing works?

I tried to find examples where the formStateRestoreCallback lifecycle hook could return autocomplete as the second reason argument, but I didn't find anything.

Here is a quote from the specification:

When user agent updates a form-associated custom element's value on behalf of a user or as part of navigation, its formStateRestoreCallback is called, given the new state and a string indicating a reason, "autocomplete" or "restore", as arguments.

To get the reason with restore you just need to refresh the page with a certain custom element on the page (don't fet to use setFormValue)

customElements.define(
  "my-input",
  class extends HTMLElement {
    constructor() {
      super();
      this.internals_ = this.attachInternals();
      this.internals_.setFormValue("sendData", "localData");
    }
    static get formAssociated() {
      return true;
    }
    connectedCallback() {
      console.log("connectedCallback has been invoked");
    }
    formResetCallback() {
      console.log("formResetCallback has been invoked");
    }
    formStateRestoreCallback(state, mode){
      console.log("formStateRestoreCallback:", state, mode);
    }
  }
);

but what do you need to do to get autocomplete?

Does anyone know if this thing works?

• javascript
• html
• dom
• specifications

• 1 In the same document, a bit later you can see that it's "If the user agent has a form-filling assist feature", I suspect this means some kind of AT. Interestingly, WPT only checks that the prop is visited, but not that the callback is ever called, not even with "restore". And even quickly looking at Chromium's source, while they do define both modes, following the call hierarchy we end up at a single hardcoded CustomElement::EnqueueFormStateRestoreCallback(Target(), restored_state,"restore"); – Kaiido Commented Jan 21 at 1:25
• @Kaiido What is AT? And yes it is sad that only "restore" works. By the way in that article Ryosuke Niwa writes: Note that WebKit currently has a limitation that only string can be used for the state, and “autocomplete” is not supported yet. – MaximPro Commented Jan 21 at 1:31
• 1 AT-> Assistive Technology. And yes, I dug a bit further and none of the big 3 seem to have implemented the "autocomplete" case. – Kaiido Commented Jan 21 at 1:38
• @Kaiido It's sad to hear. A non-fully working API is bad. If you interested you could look at this issue, there I described problem with formResetCallback. I'm not calling for anything :) – MaximPro Commented Jan 21 at 1:43
• 1 I saw your issue, but I'm not a specialist of CE, so I'll let them answer to that. – Kaiido Commented Jan 21 at 1:55

1 Answer 1

In the same document, a bit later you can see the specs say

If the user agent has a form-filling assist feature

I suspect this means some kind of AT.

Interestingly, WPT only checks that the property is visited, but not that the callback is ever called, not even with "restore".

And none of the "big 3" browsers seem to have implemented the "autocomplete" when they did implement formStateRestoreCallback.

• Webkit's PR clearly states

This change implements form-associated custom elements as per spec [1], with exception of formStateRestoreCallback() being called for autofill and support of File interface for saving / restoring state.

^{(emphasize mine)}

Firefox's has pretty much the same:

Note that 'autocomplete' for custom elements remains unsupported.

And in Chrome, while they do define the "autocomplete" mode, walking up the call hierarchy of CustomElementFormStateRestoreCallbackReaction(), we end up at a single, CustomElement::EnqueueFormStateRestoreCallback(Target(), restored_state,"restore") with an hardcoded "restore" mode, no "autocomplete" ever.

Maybe other user agents do call it though. And for it to be called, you'd need to follow the same rules as for autocomplete to work: have your element with an name or id attribute, in a <form> with a submit button.