Skip to content

Autofill doesn't work with password managers on web #61301

@nilsreichardt

Description

@nilsreichardt

Steps to Reproduce

Code to Reproduce
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: AppBar(title: Text("Demo")),
        body: _Login(),
      ),
    );
  }
}

class _Login extends StatefulWidget {
  @override
  __LoginState createState() => __LoginState();
}

class __LoginState extends State<_Login> {
  String email;
  String password;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: AutofillGroup(
        child: Column(
          children: [
            TextField(
              onChanged: (e) => email = e,
              decoration: InputDecoration(labelText: 'Email'),
              autofillHints: [AutofillHints.email],
            ),
            TextField(
              onChanged: (p) => password = p,
              decoration: InputDecoration(labelText: 'Password'),
              autofillHints: [AutofillHints.password],
            ),
          ],
        ),
      ),
    );
  }
}
  1. Copy code
  2. Run Flutter web
  3. Use a password manager (I used Bitwarden)

Expected results:
Password manager should fill out email and password

Actual results:

Two Problems:

1. Problem:

If no TextField is focused, Bitwarden doesn't recognize the TextFields.

2. Problem:

If a email TextField is focused, only the password TextField will be filled out. But if I focus password TextField, all Textfields will be filled out.

Demo

PassworBugMaster

More Information

  • I tested with flutter beta & flutter master
  • Same issue with Android & Bitwarden
  • I didn't tested an other password manager
Flutter doctor
[✓] Flutter (Channel master, 1.20.0-8.0.pre.56, on Mac OS X 10.15.5 19F96, locale en-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.47.0)
[✓] Connected device (3 available)

• No issues found!

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found 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 specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions