[web][regression] text autofill doesn't work #86497

arualana · 2021-07-15T18:47:52Z

We have a login form with just email and password

This used to work I think until 2.3.0-0.1.pre, and broke at 2.3.0-16.0.pre

I am not 100% sure which one was the upgrade that stopped it from working (I am sure it was one upgrade, though), but it was recently, and further upgrades have not solved the problem

The data is actually stored (i.e. I get the prompt to ask if I want to save/update the data in the browser and I can see it in settings -> autofill -> passwords) but there is no autofill happening on the password, the username/email only gets auto-filled

The code simplified

ListView(
      children: <Widget>[
        AutofillGroup(
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _emailTextController,
                autofillHints: const <String>[
                  AutofillHints.username,
                  AutofillHints.email
                ],
              ),
              TextFormField(
                controller: _passwordTextController,
                autofillHints: const <String>[AutofillHints.password],
              ),
              MyButton(                
                label: 'Sign In',
                onPressed: _login,
              )
            ],
          ),
        ),
      ],
    );
  }

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 2.4.0-4.0.pre, on Linux Mint 20.1 5.4.0-58-generic, locale en_US.UTF-8)

[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 4.1)
[✓] Android Studio
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
[✓] VS Code (version 1.56.2)
[✓] Connected device (2 available)

TahaTesser · 2021-07-16T12:50:08Z

Hi @arualana
Thanks for the code sample, I've just tried your code on multiple platforms (Linux, Windows, macOS), on multiple Flutter channels. It seems to work on the stable channel only. in my testing field are not being filled on other channels

Used the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            AutofillGroup(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    autofillHints: const <String>[
                      AutofillHints.username,
                      AutofillHints.email
                    ],
                  ),
                  TextFormField(
                    autofillHints: const <String>[AutofillHints.password],
                  ),
                  ElevatedButton(
                    child: Text('Sign In'),
                    onPressed: () {
                      TextInput.finishAutofillContext();
                    },
                  )
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

Steps to reproduce

Run the code with flutter run -d web-server
Open localhost address in the regular Chrome window
Enter credentials, save it using chrome (from the button in address on right side)
Clear the text, try to autofill

Results:

`stable, 2.2.3`

Autofill works, credentials are entered

Screen.Recording.2021-07-16.at.3.36.29.PM.mov

latest `beta, 2.3.0-24.1.pre` to `Channel master, 2.4.0-5.0.pre.76`

Autofill doesn't work, nothing is filled

Screen.Recording.2021-07-16.at.3.33.45.PM.mov

`chrome`	canvaskit	html
debug	❌	❌

`stable`	`beta`	`dev`	`master`
✅	❌	❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5284e darwin-x64, locale en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (2 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-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/openjdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_292-b10)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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.58.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS
      12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google
      Chrome 91.0.4472.164

! Doctor found issues in 1 category.

[✓] Flutter (Channel beta, 2.3.0-24.1.pre, on macOS 12.0 21A5284e darwin-x64,
    locale en-GB)
    • Flutter version 2.3.0-24.1.pre at /Users/tahatesser/Code/flutter_beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 615957513e (3 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.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/openjdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build
      1.8.0_292-b10)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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.58.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 91.0.4472.164

! Doctor found issues in 1 category.

[✓] Flutter (Channel dev, 2.4.0-4.0.pre, on macOS 12.0 21A5284e darwin-x64,
    locale en-GB)
    • Flutter version 2.4.0-4.0.pre at /Users/tahatesser/Code/flutter_dev
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cc00e7e6bc (5 days ago), 2021-07-11 18:21:02 -0400
    • Engine revision ed25e8f01e
    • Dart version 2.14.0 (build 2.14.0-301.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/openjdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build
      1.8.0_292-b10)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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.58.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 91.0.4472.164

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.4.0-5.0.pre.76, on macOS 12.0 21A5284e
    darwin-x64, locale en-GB)
    • Flutter version 2.4.0-5.0.pre.76 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8cf1de3e68 (8 hours ago), 2021-07-16 01:11:02 -0400
    • Engine revision c2ffafea35
    • Dart version 2.14.0 (build 2.14.0-321.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/openjdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build
      1.8.0_292-b10)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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.58.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 91.0.4472.164

! Doctor found issues in 1 category.

✅ : No Issue ❌: Issue reproduced

arualana · 2021-07-30T23:01:46Z

Hi @TahaTesser is there any update on this? has it been moved to low priority?

Bes79 · 2021-09-17T20:58:26Z

Same issue

Bes79 · 2021-09-18T07:03:01Z

i swith to stable. but not work too

C:\Users\bulic\AndroidStudioProjects\crmdb>flutter --version
Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ffb2ece (12 hours ago) • 2021-09-17 15:26:33 -0400
Engine • revision b3af521a05
Tools • Dart 2.14.2

Ashirg-ch · 2021-09-20T08:07:27Z

Same issue. This functionality ceased working roughly about when we upgraded to Flutter 2.5.0. No error messages.

flutter --version

Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ffb2ece (3 days ago) • 2021-09-17 15:26:33 -0400
Engine • revision b3af521a05
Tools • Dart 2.14.2

Bes79 · 2021-09-22T10:22:00Z

I think its because of added shadowRoute node in Dom.

Bes79 · 2021-09-22T10:25:54Z

with shadow-root - not working

without shadow-root - working - good

Bes79 · 2021-10-31T18:28:54Z

Is any information?

Bes79 · 2021-11-19T15:56:48Z

Doesn't anyone use autofill that developers can ignore this error so long?

tjholic · 2021-11-27T04:30:27Z

flutter web "autofill" function is not performed in version higher than 2.3.0-0.1.pre.

dnkoulouris · 2021-12-14T15:07:32Z

Same issue here that creates issues with our applications. Are there any updates/progress?

ob-juliandixon · 2021-12-15T18:33:46Z

Having the same issue on Flutter 2.5.0,

Frogperson · 2021-12-17T02:17:34Z

#94043 seems to fix it on Firefox, but not on Chrome. Haven't tested in Safari or any other browser

ob-juliandixon · 2021-12-17T14:44:01Z

#94043 seems to fix it on Firefox, but not on Chrome. Haven't tested in Safari or any other browser

Seems like this PR may be implementing a more thorough fix than the workaround proposed in the above issue #95210

Frogperson · 2021-12-17T19:43:04Z

#94043 seems to fix it on Firefox, but not on Chrome. Haven't tested in Safari or any other browser

Seems like this PR may be implementing a more thorough fix than the workaround proposed in the above issue #95210

Oops, that's what I meant to link, my bad! #95210 does indeed fix it on Android and Firefox from my tests, but does not change anything on Chrome (again, haven't tested Safari or anything else).
Also, taking a peak at the commit in that pull request, it's actually the exact same change mentioned by morvagergely in issue 94043, so sadly doesn't seem to be any more thorough.

MasterEthan · 2022-01-16T14:49:28Z

Does anyone have any further updates on this issue? Even with latest autofill fixes now in master they don't fix the autofill of two fields, user/email and password, in Chrome.

#94043 seems to fix it on Firefox, but not on Chrome. Haven't tested in Safari or any other browser

Seems like this PR may be implementing a more thorough fix than the workaround proposed in the above issue #95210

Oops, that's what I meant to link, my bad! #95210 does indeed fix it on Android and Firefox from my tests, but does not change anything on Chrome (again, haven't tested Safari or anything else). Also, taking a peak at the commit in that pull request, it's actually the exact same change mentioned by morvagergely in issue 94043, so sadly doesn't seem to be any more thorough.

I had the same results testing #95210. Chrome does suggest autofill for email/username but it does not autofill from the password manager like it use to (I tested in 2.2.3 stable).

Bes79 · 2022-01-28T17:35:35Z

Hi, already flutter upgraded on 2.8.1 version, but autofill stil not worked in web. does no one use this?

ugurberkecan · 2022-02-04T15:14:26Z

I also have same issue on chrome.

navaronbracke · 2022-02-21T10:35:15Z

This still happens on the latest stable 2.10.2

Bes79 · 2022-04-01T15:15:48Z

Still on flutter.2.10.4. Are only 12 people concerned about this?

Sominemo · 2022-04-21T14:08:08Z

Surprised this has zero progress yet. Did anyone come with some workarounds, except implementing own autofill with local storage?

Sominemo · 2022-04-28T02:59:28Z

I think it's because of added shadowRoute node in Dom.

I can reproduce the fact autofill starts working when you bring the inputs out of the Shadow DOM, but there's a catch.
Originally I thought this might be related to this Chromium bug: Issue 649162: Related inputs separated by shadow root do not autofill.

After launching Chrome Canary with the --enable-blink-features=AutofillShadowDOM flag, affected websites mentioned in the issue started working, but not Flutter, so the reason might be deeper.

Rexios80 · 2022-10-17T18:52:38Z

This is still an issue on Flutter 3.3.4. At least finally iOS and Android autofill seems to work (not sure what version fixed it, but it was broken for a while). Here is a hosted sample so you can see it not working: https://rexios80.github.io/flutter_autofill_test/stable

And the repo that built that: https://github.com/Rexios80/flutter_autofill_test

IvoCurado · 2023-01-09T14:54:58Z

I find myself with the same problem developing for the web and using Flutter stable version 3.3.9.
@arualana @Rexios80 Have you found any solution for this problem?

Rexios80 · 2023-01-09T16:34:54Z

If that sample app doesn't work then no

Rexios80 · 2023-01-13T19:28:16Z

I updated that repo to auto deploy builds for flutter channel stable, beta, and master every week so I don't have to maintain it anymore.

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

IvoCurado · 2023-01-15T14:51:56Z

I updated that repo to auto deploy builds for flutter channel stable, beta, and master every week so I don't have to maintain it anymore.

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

Oh ok, thanks for the feedback.

yjbanov · 2023-03-21T04:23:53Z

I believe this can be deduplicated with #87735. Please feel free to reopen if I'm wrong.

github-actions · 2023-04-04T05:00:43Z

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.

arualana closed this as completed Jul 15, 2021

arualana reopened this Jul 15, 2021

arualana closed this as completed Jul 15, 2021

arualana reopened this Jul 15, 2021

TahaTesser added the in triage Presently being triaged by the triage team label Jul 16, 2021

TahaTesser changed the title ~~[web] autofill stopped wroking on version upgrade~~ [web] autofill is broken since 2.3.0-16.0.pre Jul 16, 2021

TahaTesser changed the title ~~[web] autofill is broken since 2.3.0-16.0.pre~~ [web] text autofill doesn't work Jul 16, 2021

TahaTesser changed the title ~~[web] text autofill doesn't work~~ [web][regression] text autofill doesn't work Jul 16, 2021

mdebbar added the P1 High-priority issues at the top of the work list label Jul 22, 2021

This was referenced Aug 10, 2021

[web] Email Autofill broken on Firefox & Chrome #87309

Closed

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

Closed

maheshmnj mentioned this issue Oct 8, 2021

[IOS] Autofill on login form works on e-mail field, but not on password field #91354

Closed

darshankawar added the customer: crowd Affects or could affect many people, though not necessarily a specific customer. label Nov 4, 2022

yjbanov closed this as completed Mar 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Apr 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[web][regression] text autofill doesn't work #86497

[web][regression] text autofill doesn't work #86497

arualana commented Jul 15, 2021 •

edited by TahaTesser

Loading

TahaTesser commented Jul 16, 2021 •

edited

Loading

arualana commented Jul 30, 2021

Bes79 commented Sep 17, 2021

Bes79 commented Sep 18, 2021

Ashirg-ch commented Sep 20, 2021

Bes79 commented Sep 22, 2021

Bes79 commented Sep 22, 2021 •

edited

Loading

Bes79 commented Oct 31, 2021

Bes79 commented Nov 19, 2021

tjholic commented Nov 27, 2021

dnkoulouris commented Dec 14, 2021

ob-juliandixon commented Dec 15, 2021

Frogperson commented Dec 17, 2021

ob-juliandixon commented Dec 17, 2021

Frogperson commented Dec 17, 2021

MasterEthan commented Jan 16, 2022 •

edited

Loading

Bes79 commented Jan 28, 2022

ugurberkecan commented Feb 4, 2022 •

edited

Loading

navaronbracke commented Feb 21, 2022

Bes79 commented Apr 1, 2022

Sominemo commented Apr 21, 2022

Sominemo commented Apr 28, 2022

Rexios80 commented Oct 17, 2022 •

edited

Loading

IvoCurado commented Jan 9, 2023

Rexios80 commented Jan 9, 2023

Rexios80 commented Jan 13, 2023

IvoCurado commented Jan 15, 2023

yjbanov commented Mar 21, 2023

github-actions bot commented Apr 4, 2023

[web][regression] text autofill doesn't work #86497

[web][regression] text autofill doesn't work #86497

Comments

arualana commented Jul 15, 2021 • edited by TahaTesser Loading

TahaTesser commented Jul 16, 2021 • edited Loading

Steps to reproduce

stable, 2.2.3

latest beta, 2.3.0-24.1.pre to Channel master, 2.4.0-5.0.pre.76

arualana commented Jul 30, 2021

Bes79 commented Sep 17, 2021

Bes79 commented Sep 18, 2021

Ashirg-ch commented Sep 20, 2021

Bes79 commented Sep 22, 2021

Bes79 commented Sep 22, 2021 • edited Loading

Bes79 commented Oct 31, 2021

Bes79 commented Nov 19, 2021

tjholic commented Nov 27, 2021

dnkoulouris commented Dec 14, 2021

ob-juliandixon commented Dec 15, 2021

Frogperson commented Dec 17, 2021

ob-juliandixon commented Dec 17, 2021

Frogperson commented Dec 17, 2021

MasterEthan commented Jan 16, 2022 • edited Loading

Bes79 commented Jan 28, 2022

ugurberkecan commented Feb 4, 2022 • edited Loading

navaronbracke commented Feb 21, 2022

Bes79 commented Apr 1, 2022

Sominemo commented Apr 21, 2022

Sominemo commented Apr 28, 2022

Rexios80 commented Oct 17, 2022 • edited Loading

IvoCurado commented Jan 9, 2023

Rexios80 commented Jan 9, 2023

Rexios80 commented Jan 13, 2023

IvoCurado commented Jan 15, 2023

yjbanov commented Mar 21, 2023

github-actions bot commented Apr 4, 2023

arualana commented Jul 15, 2021 •

edited by TahaTesser

Loading

TahaTesser commented Jul 16, 2021 •

edited

Loading

`stable, 2.2.3`

latest `beta, 2.3.0-24.1.pre` to `Channel master, 2.4.0-5.0.pre.76`

Bes79 commented Sep 22, 2021 •

edited

Loading

MasterEthan commented Jan 16, 2022 •

edited

Loading

ugurberkecan commented Feb 4, 2022 •

edited

Loading

Rexios80 commented Oct 17, 2022 •

edited

Loading