Autofill Hints not populating in text fields on iOS with Flutter 3.22.0

[gonciuu]

Steps to reproduce

1. Update Flutter to version 3.22.0.
2. Ensure .well-known/apple-app-site-association is correctly configured on the server.
3. Implement autofill hints in your Flutter app.
4. Test the autofill functionality on an iOS device.
5. Try to autofill with some saved credentials

Expected results

Input fields should be automatically populated with relevant data when using autofill on iOS, similar to how it works on Android.

Actual results

Autofill suggestions appear on iOS, but selecting a suggestion does not populate the input fields.

Code sample

 AutofillGroup(
      child: Scaffold(
        body: GoldRippleGradientBackground(
          child: CustomScrollView(slivers: <Widget>[
            SliverFillRemaining(
              hasScrollBody: false,
              child: SafeArea(
                child: Padding(
                  padding:
                      const EdgeInsets.all(Dimensions.defaultScreenPadding),
                  child: Form(
                    key: formKey,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Spacer(),
                          TextFormField(
                            key: const Key('email_sign_in'),
                            autofillHints: const <String>[
                              AutofillHints.email,
                              AutofillHints.username
                            ],
                            decoration: InputDecoration(
                              labelText: context.strings.authEmailLabel,
                            )),
                          TextFormField(
                              key: const Key('password_sign_in'),
                              autofillHints: const <String>[
                                AutofillHints.password,
                              ],
                              decoration: InputDecoration(
                                labelText: context.strings.authPasswordLabel,
                          )),                      
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ]),
        ),
      ),
    );

Screenshots or Video

RPReplay_Final1715851761.1.mp4

Logs

No response

Flutter Doctor output

[✓] Flutter (Channel stable, 3.22.0, on macOS 14.4.1)
• Flutter version 3.22.0 on channel stable at
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5dcb86f (7 days ago), 2024-05-09 07:39:20 -0500
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK path
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = path
• Java binary at: path
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2023.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] Network resources
• All expected network resources are available.

[darshankawar]

Thanks for the report @gonciuu
Can you check if this issue resembles your case or not ?

[gonciuu]

Thanks for the report @gonciuu Can you check if this issue resembles your case or not ?

I believe my issue is somewhat related but not identical to the one you mentioned. In my case, the email address is visible on the keyboard bar, but when I click on it, it doesn't populate the input fields.

[vitoMacnil]

I've the same problem on iPhone 15 Pro Simulator. When I click on Password button upon the keyboard, autofill not complete, but keyboard disappear and appear magically :D

[darshankawar]

Thanks for the update @gonciuu
I tried the official Autofill example using latest stable version running on iPhone 6s (OS 15.3.1) and observed as shown in video below:

RPReplay-Final1715928118.MP4

As shown here, tapping in email address field, it shows passwords option for some reason but if you tap on it and let it go forward, it shows the email address option correctly which gets filled and then in next field, the password gets filled properly.

Can you use the same example and check at your end to see if it works as expected ? I tried to use your code sample but it contains custom implementation so couldn't use it directly.

code sampled used

import 'package:flutter/material.dart';

/// Flutter code sample for [AutofillGroup].

void main() => runApp(const AutofillGroupExampleApp());

class AutofillGroupExampleApp extends StatelessWidget {
  const AutofillGroupExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AutofillGroup Sample')),
        body: const AutofillGroupExample(),
      ),
    );
  }
}

class AutofillGroupExample extends StatefulWidget {
  const AutofillGroupExample({super.key});

  @override
  State<AutofillGroupExample> createState() => _AutofillGroupExampleState();
}

class _AutofillGroupExampleState extends State<AutofillGroupExample> {
  bool isSameAddress = true;
  final TextEditingController shippingAddress1 = TextEditingController();
  final TextEditingController emailAddress = TextEditingController();
  final TextEditingController passAddress = TextEditingController();
  final TextEditingController shippingAddress2 = TextEditingController();
  final TextEditingController billingAddress1 = TextEditingController();
  final TextEditingController billingAddress2 = TextEditingController();

  final TextEditingController creditCardNumber = TextEditingController();
  final TextEditingController creditCardSecurityCode = TextEditingController();

  final TextEditingController phoneNumber = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        const Text('Shipping address'),
        // The address fields are grouped together as some platforms are
        // capable of autofilling all of these fields in one go.
        AutofillGroup(
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: emailAddress,
                autofillHints: const <String>[AutofillHints.email],
              ),
              TextFormField(
                controller: passAddress,
                autofillHints: const <String>[AutofillHints.password],
              ),
            ],
          ),
        ),
        const Text('Billing address'),
        Checkbox(
          value: isSameAddress,
          onChanged: (bool? newValue) {
            if (newValue != null) {
              setState(() {
                isSameAddress = newValue;
              });
            }
          },
        ),
        // Again the address fields are grouped together for the same reason.
        if (!isSameAddress)
          AutofillGroup(
            child: Column(
              children: <Widget>[
                TextField(
                  controller: billingAddress1,
                  autofillHints: const <String>[
                    AutofillHints.streetAddressLine1,
                  ],
                ),
                TextField(
                  controller: billingAddress2,
                  autofillHints: const <String>[
                    AutofillHints.streetAddressLine2,
                  ],
                ),
              ],
            ),
          ),
        const Text('Credit Card Information'),
        // The credit card number and the security code are grouped together
        // as some platforms are capable of autofilling both fields.
        AutofillGroup(
          child: Column(
            children: <Widget>[
              TextField(
                controller: creditCardNumber,
                autofillHints: const <String>[AutofillHints.creditCardNumber],
              ),
              TextField(
                controller: creditCardSecurityCode,
                autofillHints: const <String>[
                  AutofillHints.creditCardSecurityCode,
                ],
              ),
            ],
          ),
        ),
        const Text('Contact Phone Number'),
        // The phone number field can still be autofilled despite lacking an
        // `AutofillScope`.
        TextField(
          controller: phoneNumber,
          autofillHints: const <String>[AutofillHints.telephoneNumber],
        ),
      ],
    );
  }
}

[vitoMacnil]

@darshankawar I've tried your code on iPhone 15 Pro Simulator with iOS 17.4, same @gonciuu problem. Now I'm testing it on real device. Stay tuned for updates

[gonciuu]

@darshankawar Yes, the bug still occurs, in the example you sent it also doesn't work as expected. After pick the credentials from keychain it should fill the form :P

[vitoMacnil]

Same problem with real device (iPhone 13 mini with iOS 17.4.1). Selecting credentials from saved credentials list fills username and password, but selecting credentials from keyboard hint autofill not happen

[darshankawar]

Thanks for the updates @gonciuu and @vitoMacnil
So if I understand correctly, the main issue is, the email address for example displayed in hint bar is not populated in the field ?
I tried by trimming down the code sample further and observed that tapping on email address field shows me Passwords hint first. If I tap done button and then in email address field, then it shows me email hint which upon selecting populates in the field properly. I tried this on iphone 6s (OS 15.3.1)

RPReplay-Final1715945336.MP4

In your case, trying to select the email field or credentials from hint bar doesn't populate the field, is this a correct interpretation of the issue ? Also, please confirm if this you are seeing only in 3.22.0 and used to work in previous version ?

[gonciuu]

Yes, that's the correct interpretation. I downloaded an old version of the app from testflight, which was on flutter version 3.19.x and everything work correctly, so I can guess that's the problem with this latest release.

[darshankawar]

Thanks for the update. I was unable to replicate this based on my earlier verification, so this seems to be device + OS specific and per OP's comment, this worked in previous version but not working in latest version, so I'll label this as regression for team's attention.

[vitoMacnil]

CONFIRMED!!! It's a bug on latest flutter sdk version. With flutter SDK 3.19.6 version it works.

[LongCatIsLooong]

I suspect it's caused by #142930. TextFields close their input connection when they lose focus, and autofill requires the target text field (or another text field in the same autofill group) to have an active input connection.

[xvrh]

Nice finding @LongCatIsLooong !! I reverted this patch locally and it fixes the problem 🙌

cc @nate-thegrate

[dcarv01]

Same error here, the error occurs after upgrade to 3.22.0. I can reproduce the error using my real iOS device. iPhone 15 iOS 17.4

[nate-thegrate]

Just filed a PR. Thanks @LongCatIsLooong and @xvrh!

[Pholluxion]

Are there any updates?

[nate-thegrate]

@nate-thegrate linked a pull request 5 days ago that will close this issue

Update FocusManager platform check to include iOS #148612

@Pholluxion you can see the current status by going to the pull request linked above. It'll be merged once someone with write access in this repository gives an approval.

[jmagman]

I am going to request this as a hotfix. Can someone confirm this behavior now works on the master channel, as expected, on top of the fix #148612?

[nate-thegrate]

Unfortunately it looks like #148612 was reverted since it caused some web platform testing issues. We should be able to address this within the next few minutes 🙂

[gonciuu]

I am going to request this as a hotfix. Can someone confirm this behavior now works on the master channel, as expected, on top of the fix #148612?

I've checked this on 3.22.1 and the bug still occurs. @vitoMacnil What about you?

[xvrh]

I am going to request this as a hotfix. Can someone confirm this behavior now works on the master channel, as expected, on top of the fix #148612?

I checked with (flutter-3.23-candidate.2)
f419177057bfd87caa1ba7d1e3b428cb256c47ad "Reland "Update FocusManager platform check to include iOS" (#148984)"

And it works ok.

Thanks.

[gonciuu]

I am going to request this as a hotfix. Can someone confirm this behavior now works on the master channel, as expected, on top of the fix #148612?

I checked with (flutter-3.23-candidate.2) f419177057bfd87caa1ba7d1e3b428cb256c47ad "Reland "Update FocusManager platform check to include iOS" (#148984)"

And it works ok.

Thanks.

So should I use candidate version, or this fix will be merged soon?

[nate-thegrate]

@gonciuu I believe the plan is to wait for a few days to make sure we don't have any tests failing, and then we'll cherry-pick this patch into an upcoming "stable" release.

(I can't make any guarantees though.)