[web] close input connection when window/iframe loses focus by yjbanov · Pull Request #166804 · flutter/flutter

yjbanov · 2025-04-09T00:44:18Z

This includes 2 fixes:

When the window/iframe loses focus, close the text input connection instead of grabbing the focus again.
Do not enable semantics using the placeholder when moving focus using the "Tab" key.

Bonus: remove the no longer necessary ViewFocusBinding.isEnabled (doesn't fix any issues, just a clean-up).

ditman

This PR seems to be fixing 3 different problems/issues. Please make its description a little bit nicer, if you're planning on landing this! :

(And don't block on anything I've said :P)

ditman · 2025-04-09T01:05:25Z

engine/src/flutter/lib/web_ui/lib/src/engine/semantics/semantics_helper.dart

+    // Simply tabbing into the placeholder element should not cause semantics
+    // to be enabled. The user should actually click on the placeholder.
+    if (event.isA<DomKeyboardEvent>()) {
+      event as DomKeyboardEvent;
+      if (event.key == 'Tab') {
+        return true;
+      }


I don't understand this comment, it says "simply by tabbing should not cause semantics to be enabled" but then it returns true if event.key is 'Tab'?

This looks like a fix for a different issue, please list it in the "Fixes" of the description of this PR?

The name of the method - shouldEnableSemantics - is misleading. true return value means "yes, forward the event to the framework; do not consume it". I plan to do some renaming, but not in this PR. The reason I included it in this PR is because as I was testing focus functionality I noticed that stumbling upon the placeholder threw off focus management because it enabled semantics and completely changed the DOM structure. With this fix I can cleanly leave and re-enter the iframe that hosts the Flutter app.

engine/src/flutter/lib/web_ui/lib/src/engine/text_editing/text_editing.dart

engine/src/flutter/lib/web_ui/test/engine/semantics/semantics_helper_test.dart

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

engine/src/flutter/lib/web_ui/lib/src/engine/text_editing/text_editing.dart

ditman

LGTM! Please fix the TODO to comply with the Flutter styleguide though!

ditman · 2025-04-11T18:26:12Z

engine/src/flutter/lib/web_ui/test/engine/text_editing_test.dart

+          // This is a mysterious behavior in Firefox. Even though the engine does
+          // call <input>.focus() the browser doesn't move focus to the target
+          // element. This only happens in the test harness. When testing
+          // manually, Firefox happily moves focus to the input element.
+          expect(domDocument.activeElement, flutterView.dom.rootElement);


Well, at least it behaves the same as Safari :P

ditman · 2025-04-11T18:31:01Z

engine/src/flutter/lib/web_ui/lib/src/engine/text_editing/text_editing.dart

+      // If the focus stays within the same FlutterView, ensure the focus stays
+      // on the input element.
+
+      // TODO(166857): the motivation/reasoning behind this remains murky.


Please, follow the style guide for flutter TODOs:

TODOs should include the string TODO in all caps, followed by the GitHub username of the person with the best context about the problem referenced by the TODO in parentheses. A TODO is not a commitment that the person referenced will fix the problem, it is intended to be the person with enough context to explain the problem. Thus, when you create a TODO, it is almost always your username that is given.

Suggested change

// TODO(166857): the motivation/reasoning behind this remains murky.

// TODO(yjbanov): Make text input less grabby. See: https://github.com/flutter/flutter/issues/166857

// The motivation/reasoning behind whay this is needed is murky.

ditman · 2025-04-11T18:33:53Z

engine/src/flutter/lib/web_ui/test/common/spy.dart

    _callback = (String channel, ByteData? data, PlatformMessageResponseCallback? callback) {
-      messages.add(PlatformMessage(channel, const JSONMethodCodec().decodeMethodCall(data)));
+      if (channel == 'flutter/lifecycle') {
+        strings.add(PlatformStringMessage(channel, const StringCodec().decodeMessage(data!)));


Are we even using the strings anywhere in tests? Or is this to be able to listen to all channels, even flutter/lifecycle?

ksokolovskyi · 2025-04-14T07:47:16Z

Hi @yjbanov @ditman!

While working on the fix for #157579 I noticed this PR and tried it locally. It works well with the one-line fields, but unfortunately, the multiline text field editing is now broken.
When I tap Enter in the multiline text field, it gets unfocused.

Master	This PR
stable.mov	pr.mov

There is an AssertionError in the console:

error.mov

Assertion Error

Uncaught (in promise) DartError: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/text_editing/text_editing.dart:1232:7
domElement != null
"The DOM element of this text editing strategy is not currently active."
    at Object.throw_ [as throw] (errors.dart:266:3)
    at Object.assertFailed (profile.dart:117:39)
    at get activeDomElement (profile.dart:117:39)
    at _engine.GloballyPositionedTextEditingStrategy.new.moveFocusToActiveDomElement (text_editing.dart:1628:5)
    at _engine.GloballyPositionedTextEditingStrategy.new.placeElement (text_editing.dart:1141:7)
    at _engine.GloballyPositionedTextEditingStrategy.new.updateElementPlacement (text_editing.dart:1390:9)
    at _engine.TextInputSetEditableSizeAndTransform.new.run (text_editing.dart:2056:16)
    at _engine.HybridTextEditing.new.acceptCommand (text_editing.dart:2359:12)
    at _engine.TextEditingChannel.new.handleTextInput (text_editing.dart:2246:5)
    at [_sendPlatformMessage] (platform_dispatcher.dart:551:21)
    at _engine.EnginePlatformDispatcher.new.sendPlatformMessage (platform_dispatcher.dart:357:5)
    at _DefaultBinaryMessenger.send (binding.dart:625:27)
    at platform_channel.dart:363:37
    at async_patch.dart:622:19
    at async_patch.dart:647:23
    at Object._asyncStartSync (async_patch.dart:541:3)
    at [_invokeMethod] (platform_channel.dart:354:14)
    at platform_channel.dart:637:18
    at async_patch.dart:622:19
    at async_patch.dart:647:23
    at Object._asyncStartSync (async_patch.dart:541:3)
    at OptionalMethodChannel.invokeMethod (platform_channel.dart:636:14)
    at text_input._PlatformTextInputControl.__.setEditableSizeAndTransform (text_input.dart:2490:5)
    at [_setEditableSizeAndTransform] (text_input.dart:2182:14)
    at text_input.TextInputConnection.__.setEditableSizeAndTransform (text_input.dart:1585:17)
    at [_updateSizeAndTransform] (editable_text.dart:4681:5)
    at [_compositeCallback] (editable_text.dart:4673:5)
    at tear (operations.dart:110:68)
    at layer.dart:235:7
    at [_fireCompositionCallbacks] (layer.dart:178:7)
    at [_fireCompositionCallbacks] (layer.dart:1080:11)
    at layer.OffsetLayer.new.detach (layer.dart:1214:5)
    at [_dropChild] (layer.dart:1336:12)
    at layer.OffsetLayer.new.removeAllChildren (layer.dart:1349:7)
    at PaintingContext._repaintCompositedChild (object.dart:156:17)
    at PaintingContext.repaintCompositedChild (object.dart:121:5)
    at object$.PipelineOwner.new.flushPaint (object.dart:1312:31)
    at binding$5._DefaultRootPipelineOwner.new.flushPaint (object.dart:1322:14)
    at binding$4.WidgetsFlutterBinding.new.drawFrame (binding.dart:631:5)
    at binding$4.WidgetsFlutterBinding.new.drawFrame (binding.dart:1231:13)
    at [_handlePersistentFrameCallback] (binding.dart:495:5)
    at tear (operations.dart:110:68)
    at [_invokeFrameCallback] (binding.dart:1438:7)
    at binding$4.WidgetsFlutterBinding.new.handleDrawFrame (binding.dart:1351:9)
    at [_handleDrawFrame] (binding.dart:1204:5)
    at tear (operations.dart:110:68)
    at Object.invoke (platform_dispatcher.dart:1312:5)
    at _engine.EnginePlatformDispatcher.new.invokeOnDrawFrame (platform_dispatcher.dart:255:5)
    at [_renderFrame] (frame_service.dart:189:32)
    at frame_service.dart:101:9
    at _RootZone.runUnary (zone.dart:1849:54)
    at zone.dart:1804:26
    at Object._callDartFunctionFast1 (js_allow_interop_patch.dart:224:27)
    at ret (js_allow_interop_patch.dart:84:15)

Sample Code

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      home: Screen(),
    ),
  );
}

class Screen extends StatelessWidget {
  const Screen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          minLines: 1,
          maxLines: null,
        ),
      ),
    );
  }
}

yjbanov · 2025-04-14T23:04:45Z

@ksokolovskyi Thanks for the heads up! I'll test this scenario.

mdebbar · 2025-04-16T19:17:59Z

I'm taking over this PR.

@ksokolovskyi I think I fixed the issue you encountered. Would you mind checking again please?

ditman · 2025-04-16T19:21:17Z

engine/src/flutter/lib/web_ui/lib/src/engine/text_editing/text_editing.dart

+  final host = view!.dom.textEditingHost;
+  if (!host.contains(element)) {
+    host.append(element);
+  }


Oh, this prevents blurs because the element gets "moved" in the DOM when already inserted? I think this deserves a small comment so it doesn't get "optimized" in the future :P

Exactly. Yes a comment is in order.

ksokolovskyi · 2025-04-16T19:36:45Z

I'm taking over this PR.

@ksokolovskyi I think I fixed the issue you encountered. Would you mind checking again please?

Hi @mdebbar, I was not able to reproduce the issue on Chrome, Safari, and Firefox. Thanks for the fix!

kevmoo · 2025-04-16T20:42:27Z

@ksokolovskyi – thank you SO MUCH for following along closely and verifying!

…lutter/flutter#166804)

flutter/flutter@3ed38e2...cfb887c 2025-04-20 [email protected] Roll Fuchsia Linux SDK from 0U_vEALFF7qRJZ_cE... to RGmU4KeQhrxqE7hsr... (flutter/flutter#167447) 2025-04-19 [email protected] Roll Skia from 3dc3ffeb45f0 to bd9ef4955aad (1 revision) (flutter/flutter#167434) 2025-04-19 [email protected] Roll Fuchsia Linux SDK from MwYckh5OvwwmIYLx0... to 0U_vEALFF7qRJZ_cE... (flutter/flutter#167430) 2025-04-19 [email protected] Roll Skia from 177a2929e32f to 3dc3ffeb45f0 (1 revision) (flutter/flutter#167428) 2025-04-19 [email protected] Revert "Reduce app startup latency by initializing the engine on a separate thread (#166918)" (flutter/flutter#167427) 2025-04-18 [email protected] Fix keyboard cover SearchAnchor list results (flutter/flutter#165382) 2025-04-18 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Mark `windows_host_engine_test` flaky (#167419)" (flutter/flutter#167425) 2025-04-18 [email protected] Docs: Update date picker theme day color properties doc (flutter/flutter#166122) 2025-04-18 [email protected] Add ktlint test for generated files from templates (flutter/flutter#167378) 2025-04-18 [email protected] Revert "[Windows] Enable merged platform and UI thread by default" (flutter/flutter#167420) 2025-04-18 [email protected] Add a DrivenScrollActivity.simulation constructor (flutter/flutter#166730) 2025-04-18 [email protected] Added missing period for consistency and readability (flutter/flutter#162887) 2025-04-18 [email protected] Roll Skia from 6c4595124690 to 177a2929e32f (1 revision) (flutter/flutter#167417) 2025-04-18 [email protected] Fix codesigning for `Mac_arm64_ios imitation_game_flutter` (flutter/flutter#167307) 2025-04-18 [email protected] Mark `windows_host_engine_test` flaky (flutter/flutter#167419) 2025-04-18 [email protected] Roll Dart SDK from ab60afc99bcb to 0cfefe2a03fb (1 revision) (flutter/flutter#167414) 2025-04-18 [email protected] [web] close input connection when window/iframe loses focus (flutter/flutter#166804) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…lutter/flutter#166804)

…166804) Fixes flutter#155265 This includes 2 fixes: * When the window/iframe loses focus, close the text input connection instead of grabbing the focus again. * Do not enable semantics using the placeholder when moving focus using the "Tab" key. Bonus: remove the no longer necessary `ViewFocusBinding.isEnabled` (doesn't fix any issues, just a clean-up). --------- Co-authored-by: Mouad Debbar <[email protected]>

…lutter/flutter#166804)

yjbanov requested review from ditman and tugorez April 9, 2025 00:44

ditman reviewed Apr 9, 2025

View reviewed changes

yjbanov mentioned this pull request Apr 9, 2025

[web] make text input less grabby with focus #166857

Closed

yjbanov requested a review from ditman April 9, 2025 17:06

yjbanov force-pushed the i155265-release-text-input-focus branch 2 times, most recently from b357aef to f099c79 Compare April 9, 2025 23:53

yjbanov added 3 commits April 9, 2025 16:54

[web] close input connection when window/iframe loses focus

549fbcf

address comments

ac7d461

fix FF/Safari tests

900a05d

yjbanov force-pushed the i155265-release-text-input-focus branch from f099c79 to 900a05d Compare April 9, 2025 23:55

ditman approved these changes Apr 11, 2025

View reviewed changes

mdebbar added 2 commits April 16, 2025 13:21

Merge branch 'main' into i155265-release-text-input-focus

4067650

prevent input from blurring unexpectedly

cbac269

ditman reviewed Apr 16, 2025

View reviewed changes

johnpryan mentioned this pull request Apr 16, 2025

Add focus fix dart-lang/dart-pad#3251

Closed

mdebbar added 3 commits April 17, 2025 11:23

fix new test

21f9b92

add comments

e3c580b

update TODO

8aedf96

mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 17, 2025

auto-submit bot added this pull request to the merge queue Apr 18, 2025

Merged via the queue into flutter:master with commit 7ca63fa Apr 18, 2025
176 of 177 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Apr 18, 2025

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 19, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

f288922

…lutter/flutter#166804)

engine-flutter-autoroll mentioned this pull request Apr 19, 2025

Roll Flutter from 3ed38e24528a to 93e5d8120143 (15 revisions) flutter/packages#9115

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 19, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

61577d0

…lutter/flutter#166804)

engine-flutter-autoroll mentioned this pull request Apr 19, 2025

Roll Flutter from 3ed38e24528a to 432fea845953 (16 revisions) flutter/packages#9116

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 20, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

3c307a3

…lutter/flutter#166804)

engine-flutter-autoroll mentioned this pull request Apr 20, 2025

Roll Flutter from 3ed38e24528a to cfb887cd5f41 (17 revisions) flutter/packages#9118

Merged

johnpryan mentioned this pull request May 13, 2025

unable to type into the "Updating existing code" text area dart-lang/dart-pad#3292

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

afaa51d

…lutter/flutter#166804)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

6b8bceb

…lutter/flutter#166804)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

f1d41b7

…lutter/flutter#166804)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

9fcf38a

…lutter/flutter#166804)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

7ca63fa [web] close input connection when window/iframe loses focus (f…

73cbf1c

…lutter/flutter#166804)

danagbemava-nc mentioned this pull request Nov 10, 2025

Flutter Web (Chrome browser) - TextFormField losing focus after it goes to background, for example on a tab switch #178109

Open

darshankawar mentioned this pull request Nov 17, 2025

Null check operator used on a null value #178619

Closed

	// TODO(166857): the motivation/reasoning behind this remains murky.
	// TODO(yjbanov): Make text input less grabby. See: https://github.com/flutter/flutter/issues/166857
	// The motivation/reasoning behind whay this is needed is murky.

Conversation

yjbanov commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ksokolovskyi commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yjbanov commented Apr 14, 2025

Uh oh!

mdebbar commented Apr 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ksokolovskyi commented Apr 16, 2025

Uh oh!

kevmoo commented Apr 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

yjbanov commented Apr 9, 2025 •

edited

Loading

ksokolovskyi commented Apr 14, 2025 •

edited

Loading