Another section is needed for autofill information

[nturgut]

Browser can use a section information on the autofill forms.

Although this is not mandatory, Safari Desktop, uses labels such as shipping in front of the address related fields, otherwise even though the address is visible in the saved forms information, it is not getting re-filled.

An example html form should looks like this:

<form method="post" action="#" id="usrForm">
  <input type="text" name="given-name" id="given-name" autocomplete="given-name">
  <input type="text" name="family-name" id="family-name" autocomplete="family-name">
  <input type="text" name="organization-title" id="organization-title" autocomplete="organization-title">
  <input type="text" name="organization" id="organization" autocomplete="organization">
  <input type="text" name="address-line1" id="address-line1" autocomplete="shipping address-line1">
  <input type="text" name="address-line2" id="address-line2" autocomplete="shipping address-line2">
  <input type="text" name="country" id="country" autocomplete="shipping country">
  <input type="text" name="country-name" id="country-name" autocomplete="shipping country-name">
  <input type="text" name="postal-code" id="postal-code" autocomplete="shipping postal-code">
  <input type="submit" value="Submit" name="submit" id="submit">
</form>

As temporary solution we can add shipping in front of all address related fields for Safari Desktop (code location)

  void applyToDomElement(html.HtmlElement domElement,
      {bool focusedElement = false}) {
    domElement.id = hint;
    if (domElement is html.InputElement) {
      html.InputElement element = domElement;
      element.name = hint;
      element.id = hint;
      if(hint.contains('address') || hint.contains('country') || hint.contains('postal')) {
        element.autocomplete = 'shipping $hint';
      } else {
        element.autocomplete = hint;
      }
      if (hint.contains('password')) {
        element.type = 'password';
      } else {
        element.type = 'text';
      }
    } else if (domElement is html.TextAreaElement) {
      html.TextAreaElement element = domElement;
      element.name = hint;
      element.id = hint;
      element.setAttribute('autocomplete', hint);
    }
  }

A long term solution would be to being able to add these section names to autofill hint. For example 'shipping' 'billing' for address, or 'home', 'work' to phone number.

[nturgut]

/cc @LongCatIsLooong assigning to framework first to see if we can get the long term solution out.

[LongCatIsLooong]

From the looks of it (https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens), the section is just another hint string? autofillHints is already a sorted collection of strings, I think we just have to update the API docs and slightly change the web implementation?

[nturgut]

It's not only a two word hint. For example this is how an element should look like:

<input type="text" name="address-line1" id="address-line1" autocomplete="shipping address-line1">

address-line-1 is the auotfill hint. Autocomplete argument also uses a section.

[LongCatIsLooong]

If I specify the hints for a TextField like this

TextField(
  ...
  autofillHints: <String>['shipping', 'address-line1'],
)

would the above work?

[nturgut]

If we put a rule such as, all the autofill-hints will be applied to autocomplete and the last one will be applied to other fields so the result looks like this, it might be possible.

<input type="text" name="address-line1" id="address-line1" autocomplete="shipping address-line1">

However, this might be confusing to mobile developers who are not accustomed to html input related properties. Is there any use case for this in mobile devices?