Skip to content

[web] Preserve text field focus across tab switches#188738

Merged
auto-submit[bot] merged 7 commits into
flutter:masterfrom
flutter-zl:fix-web-text-field-focus-tab-switch
Jul 10, 2026
Merged

[web] Preserve text field focus across tab switches#188738
auto-submit[bot] merged 7 commits into
flutter:masterfrom
flutter-zl:fix-web-text-field-focus-tab-switch

Conversation

@flutter-zl

@flutter-zl flutter-zl commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Fixes #178109

Problem

On Flutter Web, a focused TextFormField loses focus after switching to another browser tab and returning. The browser blurs the hidden text input before reporting the page as hidden, so the engine closes the text input connection too early.

Fix

Defer closing the text input connection when the document has lost focus and relatedTarget is null. If the page becomes hidden, keep the connection alive so focus can recover on tab resume. If the page stays visible, close as before to preserve window and iframe blur behavior. The delayed callback also skips closing if the document quickly regains focus.

Demo

Before After
https://flutter-demo-45-before.web.app https://flutter-demo-45-after.web.app

Steps: focus the text field, type text, switch to another browser tab, then return. Before: Focused becomes no. After: Focused returns to yes.

@flutter-dashboard flutter-dashboard Bot added the CICD Run CI/CD label Jun 29, 2026
@github-actions github-actions Bot added a: text input Entering text in a text field or keyboard related problems engine flutter/engine related. See also e: labels. platform-web Web applications specifically team-web Owned by Web platform team labels Jun 29, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a mechanism to defer closing the text input connection when the document loses focus, addressing cases like browser tab switching where a blur event occurs before the visibility state changes. A 100ms timer is used to delay the connection closure, which is cancelled if the document becomes hidden or regains focus. Corresponding unit tests are added to verify these scenarios. The review feedback recommends adding documentation to the new test-override fields to comply with the style guide, and cancelling the pending blur timer within the enable method to prevent potential race conditions.

@flutter-zl
flutter-zl force-pushed the fix-web-text-field-focus-tab-switch branch 2 times, most recently from e8e05e9 to 70e0230 Compare June 29, 2026 19:32
@flutter-zl
flutter-zl force-pushed the fix-web-text-field-focus-tab-switch branch from 70e0230 to 3142716 Compare June 29, 2026 21:11
@flutter-zl
flutter-zl force-pushed the fix-web-text-field-focus-tab-switch branch from eb25d3d to 1c0960a Compare June 30, 2026 17:22
@flutter-zl
flutter-zl requested a review from harryterkelsen July 1, 2026 20:34
harryterkelsen
harryterkelsen previously approved these changes Jul 1, 2026

@harryterkelsen harryterkelsen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with nit

Comment thread engine/src/flutter/lib/web_ui/test/engine/text_editing_test.dart
@flutter-zl
flutter-zl force-pushed the fix-web-text-field-focus-tab-switch branch from 25f6600 to f8014cc Compare July 7, 2026 17:45

@harryterkelsen harryterkelsen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 9, 2026
@auto-submit
auto-submit Bot added this pull request to the merge queue Jul 10, 2026
Merged via the queue into flutter:master with commit 6a01720 Jul 10, 2026
202 checks passed
@flutter-dashboard flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 10, 2026
auto-submit Bot pushed a commit to flutter/packages that referenced this pull request Jul 10, 2026
flutter/flutter@dc2a870...f7b66f3

2026-07-10 [email protected] [iOS][test] Fix VSyncClient display link deallocation test on iOS 27 (flutter/flutter#188627)
2026-07-10 [email protected] Fix broken listener code in WindowScope (flutter/flutter#189208)
2026-07-10 [email protected] [web] Preserve text field focus across tab switches (flutter/flutter#188738)
2026-07-10 [email protected] [Impeller] Recycle HostBuffer arena entries only after GPU completion (flutter/flutter#188965)
2026-07-10 [email protected] Assert TextStyle height is not NaN (flutter/flutter#186617)
2026-07-10 [email protected] Roll Fuchsia Test Scripts from dFkTCiDxEtPxYK5Nn... to wLST_A-xfOeGT_5mj... (flutter/flutter#189259)
2026-07-10 [email protected] Roll Dart SDK from a11fb7ed40a5 to 0fc1668c4af4 (5 revisions) (flutter/flutter#189257)
2026-07-10 [email protected] Adds a missing `await` to a `FutureOr` (flutter/flutter#189198)
2026-07-10 [email protected] [web] Repair RenderCanvas CSS size drift (flutter/flutter#188797)
2026-07-10 [email protected] Roll Fuchsia Test Scripts from s5_gZFJ8De9AJalTw... to dFkTCiDxEtPxYK5Nn... (flutter/flutter#189215)
2026-07-10 [email protected] Roll Fuchsia Linux SDK from QcRFUtvCw2EobfJ8s... to czpzDg9ABY2oKLAOY... (flutter/flutter#189222)
2026-07-10 [email protected] Update Depdencies Used By `flutter_engine_group_performance` (flutter/flutter#189229)

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a: text input Entering text in a text field or keyboard related problems CICD Run CI/CD engine flutter/engine related. See also e: labels. platform-web Web applications specifically team-web Owned by Web platform team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants