Autofill support

[Hixie]

We should make sure our text fields trigger the autofill support:
https://developer.android.com/guide/topics/text/autofill.html

[acidjazz]

Doesn't the Autofill framework work whenever an input is recognized natively?
Why aren't they? I can easily paste into them. Shouldn't something like

new TextFormField(
  keyboardType: TextInputType.emailAddress
  ...
)

do the trick?

[orospakr]

fwiw, I have the following form:

          Form(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: new InputDecoration(
                      hintText: "Email",
                      labelText: "Email"
                    ),
                  ),
                  TextFormField(
                    obscureText: true,
                    decoration: new InputDecoration(
                      labelText: "Password"
                    ),
                  )
                ],
              )
            ),

And 1Password doesn't seem to be triggering.

[jonahwilliams]

The Android auto-fill framework wasn't added until SDK 26, so I doubt we support it currently since Flutter's target SDK is still 22

[Hixie]

We will definitely have to support it. We will just have to call back to nothing on older Androids.

[cbracken]

Similarly we should ensure that we support the same for the password field changes in iOS 11 (may already work?) and the upcoming changes in iOS 12.

[stuartsoft]

Ok, so I have confirmation from @dnfield that we should now be unblocked. What's the current status on this ticket? What needs to be done? Can I help?

[dnfield]

https://developer.android.com/guide/topics/text/autofill-optimize#virtual needs to be implemented in the Android TextInputPlugin.

[dnfield]

Or perhaps https://developer.android.com/guide/topics/text/autofill-optimize#callback

[stuartsoft]

Well, I am pleased to see that lastpass is at least able to acknowledge the presence of email/password fields and prompts to autofill. Unfortunately that's where the good new stops, because it can't seem to actually perform the autofill action :(

[soorur]

+1

[jdeltoft]

Any idea when this might be scheduled for?

[ajaygautam]

This would be great to have. Saves the user from typing over and over again!
When is this scheduled for?

[LongCatIsLooong]

This should be working on the master branch now. Please open new issues for feature requests / bug reports!

Known issues:

• Have TextInputType.datetime use UIKeyboardType.numbersAndPunctuation on iOS #41508: on iOS we don't currently support UIKeyboardType.namePhonePad keyboard type, which seems to be a requirement for triggering name/telephone/address autofill on iOS.
• AutofillHint newPassword mapping is currently missing in the iOS text input plugin.

Upcoming features:

• Allow the system autofill service to save user input: Allow platforms to save user input for future autofill  #55613
• Add more platform-specific autofill flags, for example passwordRules on iOS.

[Vofchuk]

I have this issu also on the web version... any idea how to fix?

[Freundschaft]

as far as I can see, the latest master channel already implements this for flutter web, I can see the autocomplete attributes being set, but apparently the input text fields are generated on the fly, so chrome continues to offer only saving for the password input field, anyone else who can reproduce this?

[nturgut]

@Freundschaft Thanks for the question. We are working on that part, there needs to be changes on the framework, later we will merge the Flutter Web changes. The tracking issue: #55613

[Levi-Lesches]

Chrome has offered to save and autofill my password on a website I built with Flutter Web. I believe I was on the master channel when I compiled it.

chrome continues to offer only saving for the password input field

Yes, I have the same issue, Chrome only offers to save and fill the password but not the username.

[nturgut]

@Levi-Lesches yes we didn't merge the "save" solution yet. Since some fields handled different by the browsers you can see the save popups for some fields.

[max202021]

@nturgut Is the "save" solution merged? Is it tracked using this issue or there is some other issue?

[jacob-hutchings]

Wondering if anyone else has this autofill problem.

On iOS, when I have multiple text fields on a screen with different autofill hints, tapping between the text fields does not update the autofill correctly. Sometimes the autofill just doesn't show up. Sometimes the first autofill item just stays and never switches. Sometimes when I leave the app and come back, all the autofills have change to "Passwords" with the key icon.

Might be related to #59374

[stx]

Wondering if anyone else has this autofill problem.

On iOS, when I have multiple text fields on a screen with different autofill hints, tapping between the text fields does not update the autofill correctly. Sometimes the autofill just doesn't show up. Sometimes the first autofill item just stays and never switches. Sometimes when I leave the app and come back, all the autofills have change to "Passwords" with the key icon.

Might be related to #59374

Yep, same here.

[nturgut]

@nturgut Is the "save" solution merged? Is it tracked using this issue or there is some other issue?

Save solution is merged. Sorry I just saw this cc.

[LongCatIsLooong]

@jacob-hutchings @stx thanks for reporting this issue! What's your flutter version? From the screenshot it seems it happens on non-password fields right? For those fields I think we reuse the same ios view and I've never had this issue, but it's possible ios autofill caches the content type internally. Could you provide a minimal repro for investigation?

[jacob-hutchings]

@jacob-hutchings @stx thanks for reporting this issue! What's your flutter version? From the screenshot it seems it happens on non-password fields right? For those fields I think we reuse the same ios view and I've never had this issue, but it's possible ios autofill caches the content type internally. Could you provide a minimal repro for investigation?

Thank you for looking at this @LongCatIsLooong !

Here is my Flutter version info:

Flutter (Channel stable, 1.20.2, on Mac OS X 10.15.4 19E287, locale en-US)

I tested the following code on my physical iPhone 8 and also the iOS simulator iPhone SE (2nd Gen). Autofill straight up never works with the following code for me:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Autofill repro',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _firstNameController = TextEditingController();
  TextEditingController _lastNameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Autofill repro'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _firstNameController,
              decoration: InputDecoration(
                hintText: 'Given Name',
              ),
              autofillHints: [AutofillHints.givenName],
            ),
            TextField(
              controller: _lastNameController,
              decoration: InputDecoration(
                hintText: 'Family Name',
              ),
              autofillHints: [AutofillHints.familyName],
            ),
          ],
        ),
      ),
    );
  }
}

I repeatedly tested this, rebuilding, force quitting and launching, and it never showed.

After adding autocorrect: false, to the text fields and testing a bunch more times:

• I could sometimes get autofill to show but not very often.
• If I type in some text and backspace it all the way, autofill shows up pretty regularly, however, after it shows up, switching between the text fields does not update the autofill:

After testing tens of times I finally got it to update one time, but I'm not sure how I got it to work.

The behavior is very inconsistent.

Please let me know if there is additional info you need.

[giaur500]

My login form is defined as follows:

Form buildLoginForm() {
    final citiesListControl = buildCitiesSelector();

    final email = TextFormField(
      enabled: _isCitySelected,
      keyboardType: TextInputType.emailAddress,
      key: Key('email'),
      autofocus: false,
      initialValue: '',
      decoration: InputDecoration(
        hintText: 'E-mail',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
          borderRadius: BorderRadius.circular(32.0),
        ),
      ),
      onSaved: (value) => _email = value,
      validator: (val) => !EmailValidator.Validate(val, true)
          ? Strings.msg_email_invalid
          : null,
        autofillHints: [AutofillHints.email]
    );

    final password = TextFormField(
      enabled: _isCitySelected,
      key: Key('password'),
      autofocus: false,
      initialValue: '',
      obscureText: true,
      decoration: InputDecoration(
        hintText: Strings.password_hint,
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
          borderRadius: BorderRadius.circular(32.0),
        ),
      ),
      onSaved: (value) => _password = value,
      validator: (val) =>
          val.length < 4 ? Strings.msg_password_too_short : null,
        autofillHints: [AutofillHints.password]
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 2.0),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24.0),
        ),
        onPressed: _isCitySelected
            ? () {
                if (_loginFormKey.currentState.validate()) {
                  _loginFormKey.currentState.save();
                  _loginEmailPassword();
                }
              }
            : null,
        padding: EdgeInsets.all(12.0),
        color: Colors.lightBlueAccent,
        child: Text(Strings.btn_login, style: TextStyle(color: Colors.white)),
      ),
    );

    final guestLoginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 0.0),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24.0),
        ),
        onPressed: _isCitySelected
            ? () {
                _loginFormKey.currentState.save();
                _loginGuest();
              }
            : null,
        padding: EdgeInsets.all(12.0),
        color: Colors.green,
        child: Text(Strings.btn_login_guest,
            style: TextStyle(color: Colors.white)),
      ),
    );

    final statusLabel = Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Text(_status ?? "", style: TextStyle(color: Colors.red)));

    return Form(
      key: this._loginFormKey,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: ListView(
            shrinkWrap: true,
            padding: EdgeInsets.only(left: 24.0, right: 24.0),
            children: <Widget>[
              citiesListControl,
              SizedBox(height: 32.0),
              email,
              SizedBox(height: 8.0),
              password,
              SizedBox(height: 24.0),
              loginButton,
              guestLoginButton,
              statusLabel
            ],
          ),
        ),
      ),
    );
  }

On Android, I am never getting any autofill. Is that anything wrong in my code? Issue is closed, so I guess functionality is finished, so what's wrong?

I expected autfill like this: https://youtu.be/DvvaxPTBoxQ?t=183 but it never shows. What am I doing wrong?

[bierbaumtim]

Every post I saw about Autofill they wrap the Widget were the TextInputFields in with an AutofillGroup. I does it the same way and it works fine.
So maybe that would solve the problems.
Also for iOS you need to define an Runner.entitlements file with associated domains and webcredentials to be able to use them.

[mbaleczny]

Wrapping with AutofillGroup seems to do the magic. Also, in order to be able to see "save data" pop-up I had to use Form and save it on submit / successful login.
Tested on Android with autofill services:

• Google - save data worked, update password didn't worked.
• Samsung Pass - none worked.

Have you managed to make it working with other password managers?

[abc873693]

Wrapping with AutofillGroup seems to do the magic. Also, in order to be able to see "save data" pop-up I had to use Form and save it on submit / successful login.
Tested on Android with autofill services:

• Google - save data worked, update password didn't worked.
• Samsung Pass - none worked.

Have you managed to make it working with other password managers?

Ref this issue #55613 (comment).
This feature not release stable channel.

[giaur500]

I tried to wrap Form or ListView with AutofillGroup but still no autofill shown.

[bochigarcia]

Hello, it works !!! Wrap the fields with AutoFillGroup and add to each field your autoFillHint is magic in web. The autocomplete with email and password started to work. Thanks

[lukepighetti]

AutofillGroup is the magic

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.