When do custom elements invoke lifecycle hook formStateRestoreCallback with reason argument equal to "autocomplete"?

Question

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 forget 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?

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
– 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
– MaximPro, Commented Jan 21 at 1:31
AT-> Assistive Technology. And yes, I dug a bit further and none of the big 3 seem to have implemented the "autocomplete" case. — Kaiido
– 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
– MaximPro, Commented Jan 21 at 1:43
I saw your issue, but I'm not a specialist of CE, so I'll let them answer to that. — Kaiido
– Kaiido, Commented Jan 21 at 1:55

Kaiido · Accepted Answer · 2025-01-21 01:55:08Z

1

+50

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.

answered Jan 21 at 1:55

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MaximPro Jan 21 at 2:06

I'm not sure that we are talking about assistive technology (AT). Here we are talking more about the ability of the browser to do autofill. In Firefox, if you entered data into a form, sent it, and then returned to the same form, then if you double-click on the input field of the form, depending on the type, a list of data will be thrown out and choosing one of them will fill the input field. This is the so-called "form-filling assist feature"

MaximPro Jan 21 at 2:07

The rest of the message is very interesting, I think I will give you the bounty as soon as possible. Thanks for another great answer.

Kaiido Jan 21 at 2:11

Well that's the thing, given that the current autocomplete we have on base-browsers is always backed by an user click, we don't really have a true "auto-fill", where the value is set automatically at page load. So I don't think it's exactly the same feature, and I suspect at least some AT do have an actual "auto-fill" feature, which should fire the callback.

Collectives™ on Stack Overflow

When do custom elements invoke lifecycle hook formStateRestoreCallback with reason argument equal to "autocomplete"?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related