Skip to content

[WEB] [Firefox] Autofill does not fill both login fields #68005

@cbenhagen

Description

@cbenhagen

When clicking the username field, both fields should be filled. But in Firefox only the password field is. Safari on the other side will only fill the username field.

When you click the password field, both fields are filled correctly.

Make sure you allow password autofill on http:
In Firefox about:config set signon.autofillForms.http to true;

Safari will only autofill on https hosts. To test this on localhost you can use mitmproxy as a reverse proxy:
mitmproxy --mode reverse:http://localhost:65390 -p 443

Make sure you add the CA cert in ./mitmproxy as a trusted root cert and do not use localhost but add somerandomhost.net to /etc/hosts.

This works as expected on Chrome;

/cc @LongCatIsLooong

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey();
  bool _loggedIn = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: _loggedIn
            ? Center(
                child: RaisedButton(
                child: Text('logout'),
                onPressed: _logMeOut,
              ))
            : AutofillGroup(
                child: Form(
                  key: _formKey,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        TextFormField(
                          decoration: InputDecoration(labelText: "Username"),
                          textInputAction: TextInputAction.next,
                          autofillHints: [AutofillHints.username],
                        ),
                        SizedBox(height: 8),
                        TextFormField(
                          decoration: InputDecoration(labelText: "Password"),
                          obscureText: true,
                          textInputAction: TextInputAction.done,
                          autofillHints: [AutofillHints.password],
                          onEditingComplete: _logMeIn,
                        ),
                        SizedBox(height: 8),
                        RaisedButton(
                          child: Text("login"),
                          onPressed: _logMeIn,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
      ),
    );
  }

  _logMeIn() {
    setState(() {
      _loggedIn = true;
    });
  }

  _logMeOut() {
    setState(() {
      _loggedIn = false;
    });
  }
}
[✓] Flutter (Channel master, 1.23.0-14.0.pre.152, on macOS 11.0 20A5384c x86_64, locale en-CH)
    • Flutter version 1.23.0-14.0.pre.152 at /Users/ben/flutter
    • Framework revision 62cf4dbf10 (3 hours ago), 2020-10-13 14:12:02 +0800
    • Engine revision 6634406889
    • Dart version 2.11.0 (build 2.11.0-213.0.dev)


[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/ben/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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


[✓] Connected device (4 available)
    • Pixel 3a (mobile) • 03GAY1V9EJ • android-arm64  • Android 11 (API 30)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 11.0 20A5384c x86_64
    • Web Server (web)  • web-server • web-javascript • Flutter Tools
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 86.0.4240.75

• No issues found!

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: qualityA truly polished experiencea: text inputEntering text in a text field or keyboard related problemsbrowser: firefoxonly manifests in Firefoxf: material designflutter/packages/flutter/material repository.found in release: 3.10Found to occur in 3.10found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions