Flutter throws "Unexpected null value" on autofill events (Web only)

Question

Whenever I try to fill out my form in web (Safari or Chrome) I get an Unexpected null value error. Upon inspection I noticed that the browser recognizes the autofill as a keyboard event. In keyboard_binding.dart on line 369 we can see that _handleEvent is expecting the event object to contain a keyboard key.

Flutter version: 3.7.5 OS: MacOS 13.2.1 Platform: Chrome 111.0.5563.64

Error during app session

Flutter doctor:

[✓] Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-arm64, locale en-BG) • Flutter version 3.7.5 on channel stable at /opt/homebrew/Caskroom/flutter/3.0.5/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision c07f788888 (3 weeks ago), 2023-02-22 17:52:33 -0600 • Engine revision 0f359063c4 • Dart version 2.19.2 • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2) • Android SDK at /Users/usr/Library/Android/sdk • Platform android-33, build-tools 33.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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 11.0.13+0-b1751.21-8125866)

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

[✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

Minimal reproducible code:

import 'package:flutter/material.dart';

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

class CommonFieldsScreen extends StatelessWidget {
  const CommonFieldsScreen({super.key});
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();
    final firstNameController = TextEditingController();
    final lastNameController = TextEditingController();

    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SizedBox(
                    width: 330,
                    child: Form(
                        key: formKey,
                        child: AutofillGroup(
                            child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextFormField(
                              controller: firstNameController,
                              decoration:
                                  const InputDecoration(hintText: 'First Name'),
                              autofillHints: const [AutofillHints.givenName],
                              validator: _requiredValidator,
                            ),
                            TextFormField(
                                controller: lastNameController,
                                decoration: const InputDecoration(
                                    hintText: 'Last Name'),
                                autofillHints: const [AutofillHints.familyName],
                                validator: _requiredValidator),
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(vertical: 16.0),
                              child: ElevatedButton(
                                onPressed: () {
                                  if (formKey.currentState?.validate() ??
                                      false) {
                                    firstNameController.clear();
                                    lastNameController.clear();
                                  }
                                },
                                child: const Text('Submit Form'),
                              ),
                            ),
                          ],
                        )))))));
  }

  String? _requiredValidator(String? value) {
    if (value == null || value.isEmpty) return 'Required';
    return null;
  }
}

Error log using Flutter run --verbose:

[+141363 ms] Error: Unexpected null value. dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 561:63 nullCheck lib/_engine/engine/keyboard_binding.dart 369:38 [_handleEvent] lib/_engine/engine/keyboard_binding.dart 582:7 handleEvent lib/_engine/engine/keyboard_binding.dart 97:25 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall lib/_engine/engine/keyboard_binding.dart 139:23 loggedHandler dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall [ +21 ms] Error: Unexpected null value. dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 561:63 nullCheck lib/_engine/engine/keyboard_binding.dart 369:38 [_handleEvent] lib/_engine/engine/keyboard_binding.dart 582:7 handleEvent lib/_engine/engine/keyboard_binding.dart 100:25 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall lib/_engine/engine/keyboard_binding.dart 139:23 loggedHandler dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall

I don't think there's much I can do on my side to fix this as it seems to be an internal Flutter bug. When I wrapped my widget inside of KeyboardListener I wasn't even able to detect the autofill event.

Answer 1

I also have this problem. 2023.08.18 This is in an email field, and caused when I type 1 letter then select the email from the provided list.

[✓] Flutter (Channel stable, 3.13.0, on Ubuntu 22.04.3 LTS 6.2.0-26-generic, locale en_CA.UTF-8)
    • Flutter version 3.13.0 on channel stable at /home/doug/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision efbf63d9c6 (3 days ago), 2023-08-15 21:05:06 -0500
    • Engine revision 1ac611c64e
    • Dart version 3.1.0
    • DevTools version 2.25.0


Error: Unexpected null value.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 855:63  nullCheck
lib/_engine/engine/keyboard_binding.dart 372:38                                   [_handleEvent]
lib/_engine/engine/keyboard_binding.dart 582:7                                    handleEvent
lib/_engine/engine/keyboard_binding.dart 98:18                                    <fn>
lib/_engine/engine/keyboard_binding.dart 140:16                                   loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39  dcall

I tried editing the file in ./snap/flutter/common/flutter/bin/cache/flutter_web_sdk/lib/_engine/engine/keyboard_binding.dart but it had no effect. I can not find anywhere else to edit it.

The only fix is unsatisfactory: I commented out the AutofillHints: part of the TextFormField.

Probably from code: void _handleEvent(FlutterHtmlKeyboardEvent event) { final Duration timeStamp = _eventTimeStampToDuration(event.timeStamp!);

final String eventKey = event.key!;

I suspect that event.key is null, if no key was pressed but the TextFormField was filled in by clicking on a menu choice.

Answer 2

Seems to be common issue -> https://github.com/flutter/flutter/issues/114620

With P2 Priority.

The P2 label indicates issues that we agree are important to work on, but are not at the top of the work list. This is the default level for new issues.

A bug at this priority level may not be fixed for a long time.