Flutter Web Debugging Issue: Assertion Failed on Text Input Click in Chrome (Flutter 3.27.0, Dart 3.6.0)

I am encountering a peculiar issue while debugging a Flutter web application on Chrome. My development setup is as follows:

• Flutter Version: 3.27.0
• Dart Version: 3.6.0
• Editor: Visual Studio Code (1.95.3)
• OS: macOS (Apple M2)
• Browser: Chrome (131.0.6778.139)

Issue Description

I copied the Form example directly from the official Flutter API page (Form Class Documentation) and ran it in my environment using Flutter's web debugging mode. However, when I try to click on the text input field with my mouse, I encounter the following error:

DartError: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/pointer_binding/event_position_helper.dart:70:10
targetElement == domElement
"The targeted input element must be the active input element"
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:3     throw_
errors.dart:288
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39               assertFailed
profile.dart:110
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39               _computeOffsetForInputs
profile.dart:110
lib/_engine/engine/pointer_binding/event_position_helper.dart 38:14             computeEventOffsetToTarget
event_position_helper.dart:38
lib/_engine/engine/pointer_binding.dart 1088:30                                 [_convertEventsToPointerData]
pointer_binding.dart:1088
lib/_engine/engine/pointer_binding.dart 1016:9                                  <fn>
pointer_binding.dart:1016
lib/_engine/engine/pointer_binding.dart 948:7                                   <fn>
pointer_binding.dart:948
lib/_engine/engine/pointer_binding.dart 541:9                                   loggedHandler
pointer_binding.dart:541
dart-sdk/lib/_internal/js_dev_runtime/patch/js_allow_interop_patch.dart 212:27  _callDartFunctionFast1

When running the same code snippet directly on the official Flutter documentation's embedded example, I do not experience this issue.

Steps to Reproduce

1. Copy the Form example from the official Flutter API documentation.
2. Create a new Flutter web project using flutter create.
3. Replace the main.dart content with the copied example code.
4. Start debuging with F5 button in VSCode.
5. Click on the text input field in Chrome.

Observations

• The error suggests that the targeted input element must be the active input element.
• The error does not occur on the official Flutter API page, even though I am using the same example code.

Questions

1. Why does this error occur in my environment, but not on the official documentation page?
2. How can I resolve this issue and make the text input field work as expected?

UPD: fixed in 3.27.2, please update

It's not just problem in your environment, it is problem this recent 3.27 release. There is already issue filled on this matter on Flutter issue tracker here.

Answering your questions:

1. These interactive examples of code are using dartpad.dev by embedding it to page. AFAIK, dartpad.dev is still using previous stable of Flutter, which is 3.24.5 and Dart 3.5.4. My best guess is that error in not exists in this version.

2. You can wait for hot fix (i.e. 3.27.1 or later), which (I'm pretty sure of it) will contain fix for this problem. But there's no timeframe when this hot fix will be introduced. At least, it's unknown by time of this answer is posted.

Another way is to downgrade/upgrade your Flutter installation. You can try 3.24.5 (since darted uses it and this code works there), or maybe you can try master channel, since team mentioned that it's fixed there (comment on this matter).