[Web] No autofill suggestions for new or existing save passwords and selected suggested password is not filled

[jaikrishnachandrasekar]

Hi Team,

I have multiple issues with Auto fill feature.

Note : i have already linked the google account and turned on the sync

1. When textfield comes in focus, it didnot open the password suggestions automatically , Note : i have added the code for AutoFillHints.newPassword and tried AutoFillHints.password.
2. When i manually right click password textfield and click the suggest password from the options from context menu, it suggest random password in dropdown but when i click the dropdown, it is not getting populated in the textfied, until if i have some text in the textfield and try the same process again.
3. When i move from the one tab to another and comes back, when i right click and choose the option suggest password , it is not even showing that dropdown for password suggestions.
4. Later i re-run the application and added the password and save it, if i comes back again to sigin screen, it is not proposing me the auto fill options of the email and password which was saved in the google account.

Please find the minimal sample to reproduce the issue.
test.zip

Also i am attaching video of it, because it is difficult to explain it with screenshots, as the issues are reproduced with the scenarios. Please find the video below,

AutofillIsssue.mp4

NOTE: fixing this issue is blocked by https://bugs.chromium.org/p/chromium/issues/detail?id=649162

This is a new, Flutter-specific tracking issue
Note 2: https://bugs.chromium.org/p/chromium/issues/detail?id=1378402

[maheshmnj]

Hi @jaikrishnachandrasekar, please share the output of flutter doctor -v to better investigate the issue.

Thank you

[jaikrishnachandrasekar]

Hi @maheshmnj ,

Please find thre required information below,

flutter doctor -v

[✓] Flutter (Channel beta, 2.3.0-24.1.pre, on Ubuntu 20.04.1 LTS 5.8.0-59-generic, locale en_IN)
    • Flutter version 2.3.0-24.1.pre at /home/jaikrishna/Desktop/Flutter_SDK/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 615957513e (6 weeks ago), 2021-06-25 09:24:44 -0700
    • Engine revision 9d517f475b
    • Dart version 2.14.0 (build 2.14.0-188.5.beta)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2)
    • IntelliJ at /snap/intellij-idea-ultimate/311
    • Flutter plugin version 58.0.4
    • Dart plugin version 212.4746.57

[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
    • IntelliJ at /snap/intellij-idea-ultimate/306
    • Flutter plugin version 55.0.5
    • Dart plugin version 211.6693.108

[✓] VS Code
    • VS Code at /snap/code/current
    • Flutter extension version 3.24.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

! Doctor found issues in 2 categories.

[maheshmnj]

Hi @jaikrishnachandrasekar, I tried this in firefox and I could see the browser prompting me with a random password incase of chrome browser, I don't see any such suggest password option on right click Is this anything specific to OS or chrome version?

And regarding your 4th issue there's already an issue filed here #87309

Screen.Recording.2021-08-09.at.8.13.16.PM.mov

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale en-GB)
    • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter
    • Framework revision f4abaa0735 (4 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • 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 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.58.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile)                       • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 11.4 20F71 darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 92.0.4515.107

• No issues found!

[jaikrishnachandrasekar]

Hi @maheshmnj ,

Note: Right now i tested in the windows machine, google chrome still reproduces the issue in the windows machine too. And also other websites are working in the chrome browser.

The video which i posted earlier was from the chrome Linux, and now after your reply i tried from the linux firefox browser and it is working. What i shared is a minimal sample to reproduce the issue, i cannot ask our customers to use only the firefox browser.

i hope the issue reproduces when the chrome browser is used and also i tested in safari i did not get any pop up for suggest password and even if i right click it i dont find any options fot suggest password.

[TahaTesser]

hI @jaikrishnachandrasekar
Thanks for filing the issue, I'm able to reproduce the issue on chrome on macOS, Windows, and Linux (same behavior on current stable. (can't reproduce on other Flutter channels, blocked by #86497)

Used the following minimal code sample

complete minimal runnable code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController username = TextEditingController();
  TextEditingController newPassword = TextEditingController();
  TextEditingController repeatNewPassword = TextEditingController();
  TextEditingController password = TextEditingController();

  bool isNewUser = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AutofillGroup(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Text('Username'),
            TextField(
                controller: username,
                autofillHints: const [AutofillHints.username]),
            CheckboxListTile(
              value: isNewUser,
              onChanged: (bool? newValue) {
                setState(() {
                  isNewUser = newValue!;
                });
              },
              title: const Text('New user?'),
            ),
            if (isNewUser) ...[
              const Text('Password'),
              TextField(
                  obscureText: true,
                  controller: newPassword,
                  autofillHints: const [AutofillHints.newPassword]),
            ],
            if (isNewUser) ...[
              const Text('repeat password'),
              TextField(
                  controller: repeatNewPassword,
                  autofillHints: const [AutofillHints.newPassword]),
            ],
            if (!isNewUser)
              TextField(
                  controller: password,
                  autofillHints: const [AutofillHints.password]),
          ],
        ),
      ),
    );
  }
}

Let's summarize the issues you listed

1. No automatic suggestions for a new password

macOS	Windows	Linux

2. No automatic suggestions for already saved passwords (Even if I have multiple passwords saved for the same site, there is should be a suggestion dropdown to choose from), and the text field is automatically filled with one of the credentials. This will be problematic if I wanna choose another account for the same website.

macOS, Windows & Linux

Screen.Recording.2021-08-10.at.17.42.41.mov

2. When choosing suggest strong password, the text field is not filled

macOS

Windows

Linux

Your Point 4 is the same as point 1 and these don't reproduce on Firefox at least on the stable channel and never seen these features working before, not labelling as regression

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5294g darwin-x64, locale
    en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (6 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Temurin-11.0.12+7 (build
      11.0.12+7)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5201i
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.59.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (3 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      15.0
    • macOS (desktop)        • macos                     • darwin-x64     •
      macOS 12.0 21A5294g darwin-x64
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 92.0.4515.131

! Doctor found issues in 1 category.

[devjeff]

I have also encountered the issue no. 2 on Flutter web. The user credentials are autofilled immediately when I press on the username or password field and it gets focused. This is not the expected behavior. When the field is focused, the browser's autofill suggestion hint should be displayed and clicked by the user, before the values are inserted.

[CrisNegoianu]

It's been at least 6 months, and nothing on the beta channel as that's the one I've been using all along.

[maheshmnj]

Please leave an upvote on the original post 👍🏻 if you are affected by this issue.

same here
same issue

comments like these don't really add any value to this issue, but upvotes might do to help increase the priority of the issue..

[zs-dima]

Chromium issue fixed already hopefully, waiting for the Flutter fix
WICG/webcomponents#187

[Rexios80]

Here is a test app I made for this issue. These pages are auto-built once a week for Flutter channels stable, beta, and master.

https://rexios80.github.io/flutter_autofill_test/stable
https://rexios80.github.io/flutter_autofill_test/beta
https://rexios80.github.io/flutter_autofill_test/master

[kevmoo]

For folks folks tracking here, I'll let you know when we have a flutter/flutter roll with the engine w/ this fix.

We'd LOVE you to try out scenarios – if possible – on the master channel to make sure this is working!

[kevmoo]

flutter/engine@0416103

[startupking1]

Has this been fixed?

[startupking1]

What about on iOS?

#99356

Looks like above was closed but this really doesn't work.

Please help.

[AristideVB]

Still not working on the latest version of Chrome on iOS, autocompletion is suggested but it does not fill the password field

Also it does not work on iOS Safari

Upload.from.GitHub.for.iOS.MOV

[zs-dima]

Has this been fixed?

No, it does not work for any stable Flutter Web yet.
Does not work on both desktop and mobile.
Tested with Flutter 3.7.5, 3.7.6, 3.7.7, 3.7.8, 3.7.9
Desktop Chrome 111.0.5563.147 (Official Build) (64-bit)
Android Chrome 111.0.5563.116

flutter build web --release --web-renderer canvaskit

It will probably work with the Master Flutter version, as @kevmoo mentioned.

[kevmoo]

The fix was reverted. thanks so much for your patience. Let us dig in today

…

On Mon, Apr 3, 2023, 03:45 zs-dima ***@***.***> wrote: Has this been fixed? No, it does not work for any Flutter Web. Tested with Flutter 3.7.5, 3.7.6, 3.7.7, 3.7.8, 3.7.9 Desktop Chrome 111.0.5563.147 (Official Build) (64-bit) Android Chrome 111.0.5563.116 — Reply to this email directly, view it on GitHub <#87735 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAEFCQOVC7VUWXDKK3DWLLW7KS5TANCNFSM5BUC4GSA> . You are receiving this because you commented.Message ID: ***@***.***>

[yjbanov]

Reopening because the fix was rolled back.

[Rexios80]

Is this merged in yet? It looks like it is, but if so it isn't working on my test app. It seems like Chrome can see the email field and gives options to autofill email addresses it's seen before, but 1Password can't do anything useful.

https://rexios80.github.io/flutter_autofill_test/master

[htoor3]

Quick update:

• We had to revert last week to make a couple of minor changes to accommodate existing tests internally and within our framework.
• We have re-landed the change here: [web] - Move text editing nodes outside of shadowDOM, reland engine#40968
• As @kevmoo mentioned, we'd love for you to please try out various scenarios on master and leave any feedback if you can! Thank you for the patience on this.

[Rexios80]

Screen.Recording.2023-04-11.at.10.42.29.PM.mov

Autofill works, but the blue box covers up the email field for some reason

[kevmoo]

@Rexios80 – I'd call that progress. Which browser?

[Rexios80]

Same behavior in Safari and Chrome

[Rexios80]

Oh also it looks like the field you have focused when autofilling gets the blue box. If I have the password field focused it has the blue box over it.

[skreborn]

@kevmoo @Rexios80 The blue box is 1Password changing the background color of the focused input field. We might need to force the transparency Flutter requires somehow, but the 1Password CSS rule is already awfully specific (and includes an !important).

Even applying background-color on the element style with a value of transparent !important doesn't seem to be able to override this rule. This is the case in both Firefox and Chrome, and I'm assuming others. I'm looking into a workaround.

[skreborn]

@kevmoo Is there a reason Flutter's input fields need to be opacity: 1? So far, I've found that nothing in the world overrides an injected style in either browser - the only viable workaround for now to make the stark color disappear has been making the whole element disappear, but I understand this might be problematic for other reasons.

[skreborn]

For the opacity change, I'm guessing it's not feasible first and foremost because we couldn't use the browser's spellcheck (or rather the accompanying squiggly lines) anymore.

Removing the data-com-onepassword-filled attribute works, obviously, as does triggering an input event programmatically (since 1Password removes the attribute itself when the value is modified), but both of those seem like awful workarounds. The first one also only works for 1Password specifically, and I would really rather not have weird hacks like that in the framework. The second, while it might work, also seems terribly shoddy, in addition to it being fairly hard (although not impossible) to tell when the event should be triggered in the first place.

[htoor3]

@skreborn Flutter delegates the styling of inputs to the framework and hides the default browser styles - this is done to achieve consistency across different platforms, so removing opacity styling would likely lead to other visual issues. The styles applied to the input are all inline and have the highest specificity, but since the 1P injected styles are applied afterwards and include !important, there isn't a straightforward way to override them.

The good news is that we have a proposal for a text editing solution that inverts the styling delegation of these inputs in a way that is more consistent with native browser behavior: #120613. I believe this 1Password issue is an example of what could be solved with that proposal.

Let's close this issue since the root cause is fixed. @Rexios80 please open an issue for the 1Password styling bug so we move the discussion there.

[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.