[web] Fix multiline input selection in Chrome. #168217

ksokolovskyi · 2025-05-02T15:58:22Z

Description

First of all, I would like to thank @jezell for posting their fix of this selection issue: singerdmx/flutter-quill#2450 (comment)

The issue with selection is happening because in Chrome pointermove event and its coalesced events have some different targets. @mdebbar already spotted this behavior some time ago and even filed a Chrome bug: flutter/engine#56949 (comment)

This jsfiddle allows reproducing the bug: https://jsfiddle.net/knevercode/y2hpfmrb/2/

On the following recording, you can see the events' targets and their bounding boxes.

chrome_bug.mov

Those coalesced events have their offsetX and offsetY values relative to the dummy div target. So to fix that, we have to translate those values to be relative to the actual target.

This PR does exactly this in _computeOffsetForInputs when event.target != eventTarget .

Before	After
https://chrome-input-selection-bug.web.app	https://chrome-input-selection-fix.web.app
bug.mov	fix.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

ksokolovskyi · 2025-05-02T16:48:53Z

Hi @justinmc, yesterday you asked me about this selection bug. Tagging you to keep you updated.

mdebbar

Thanks for fixing this issue!

Other than the naming issue, this PR looks good to me.

mdebbar · 2025-05-08T14:12:29Z

engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding/event_position_helper.dart

+  final DomElement? eventTargetElement = event.target as DomElement?;
+  final DomElement actualTargetElement = eventTarget as DomElement;


The names here are becoming confusing lol. What do you think about something like this:

Suggested change

final DomElement? eventTargetElement = event.target as DomElement?;

final DomElement actualTargetElement = eventTarget as DomElement;

final DomElement? originalTarget = event.target as DomElement?;

And leave eventTarget as is.

mdebbar

ksokolovskyi · 2025-05-08T15:08:54Z

Thanks for fixing this issue!

Other than the naming issue, this PR looks good to me.

Hi @mdebbar, thanks a lot for the review!
I applied your suggestions in the latest commit. Could you please take a look again?

…tter#168217)

flutter/flutter@336a7ec...0b9f928 2025-05-14 [email protected] Fix Linux Impeller support broken by incorrect deletion of stencil buffer. (flutter/flutter#168668) 2025-05-14 [email protected] Roll Fuchsia Linux SDK from 6J81agNhuK4q255Jj... to fSvuEJgRmHxnewRJr... (flutter/flutter#168794) 2025-05-14 [email protected] Run `{Platform} flutter_packaging` builders on release candidates. (flutter/flutter#168762) 2025-05-14 [email protected] Remove `docs_deploy_beta`, fix `docs_publish`, add comments. (flutter/flutter#168754) 2025-05-14 [email protected] Add `titleAlignment` to `CheckboxListTile` and `RadioListTile` (flutter/flutter#168666) 2025-05-14 [email protected] Remove deprecated todo about caching (flutter/flutter#168534) 2025-05-13 [email protected] Replace hardcoded host and app level build.gradle paths with `AndroidProject`-level getters in `gradle_errors.dart` (flutter/flutter#167949) 2025-05-13 [email protected] Improve documentation for KeyedSubtree constructor (flutter/flutter#167198) 2025-05-13 [email protected] Wire up the system text scaler from `PlatformDispatcher` (flutter/flutter#159999) 2025-05-13 [email protected] Roll Dart SDK from 645d04a7a964 to b3520981e0f0 (3 revisions) (flutter/flutter#168721) 2025-05-13 [email protected] [a11y] Semanctis flag refactor step 3: framework part (flutter/flutter#167771) 2025-05-13 [email protected] Remove/replace the `team` label with `c: contributor-productivity`. (flutter/flutter#168702) 2025-05-13 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (#168510)" (flutter/flutter#168775) 2025-05-13 [email protected] Use live region in error text input decorator for Android (flutter/flutter#165531) 2025-05-13 [email protected] [tool] Fix deprecated API calls within tool (flutter/flutter#168200) 2025-05-13 [email protected] Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (flutter/flutter#168510) 2025-05-13 [email protected] Fixes hero not shown when remove pages without animation (flutter/flutter#168617) 2025-05-13 [email protected] [iOS] Do not hide selection handles when platform hides system context menu (flutter/flutter#168678) 2025-05-13 [email protected] Updated execution path to silently include --start-paused and updated tests (flutter/flutter#168400) 2025-05-13 [email protected] Roll Packages from 6a28ad9 to 2e166de (2 revisions) (flutter/flutter#168736) 2025-05-13 [email protected] [web] Fix multiline input selection in Chrome. (flutter/flutter#168217) 2025-05-13 [email protected] Call xcode_backend.dart from macos_assemble.sh (flutter/flutter#168108) 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] 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

BenDevExatech · 2025-05-20T09:42:07Z

Hi,
This fix sounds good as I have a full fonctionnality using flutter_quill based on text selection within the editor and which is completely unusable now since last chrome versions because of this selection issue...

But I'm a little lost regarding which version I can use to test this fix.
I'm using FVM to switch sdk versions on the project.
Thanks in advance for your kind feedback.

…r#9251) flutter/flutter@336a7ec...0b9f928 2025-05-14 [email protected] Fix Linux Impeller support broken by incorrect deletion of stencil buffer. (flutter/flutter#168668) 2025-05-14 [email protected] Roll Fuchsia Linux SDK from 6J81agNhuK4q255Jj... to fSvuEJgRmHxnewRJr... (flutter/flutter#168794) 2025-05-14 [email protected] Run `{Platform} flutter_packaging` builders on release candidates. (flutter/flutter#168762) 2025-05-14 [email protected] Remove `docs_deploy_beta`, fix `docs_publish`, add comments. (flutter/flutter#168754) 2025-05-14 [email protected] Add `titleAlignment` to `CheckboxListTile` and `RadioListTile` (flutter/flutter#168666) 2025-05-14 [email protected] Remove deprecated todo about caching (flutter/flutter#168534) 2025-05-13 [email protected] Replace hardcoded host and app level build.gradle paths with `AndroidProject`-level getters in `gradle_errors.dart` (flutter/flutter#167949) 2025-05-13 [email protected] Improve documentation for KeyedSubtree constructor (flutter/flutter#167198) 2025-05-13 [email protected] Wire up the system text scaler from `PlatformDispatcher` (flutter/flutter#159999) 2025-05-13 [email protected] Roll Dart SDK from 645d04a7a964 to b3520981e0f0 (3 revisions) (flutter/flutter#168721) 2025-05-13 [email protected] [a11y] Semanctis flag refactor step 3: framework part (flutter/flutter#167771) 2025-05-13 [email protected] Remove/replace the `team` label with `c: contributor-productivity`. (flutter/flutter#168702) 2025-05-13 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (#168510)" (flutter/flutter#168775) 2025-05-13 [email protected] Use live region in error text input decorator for Android (flutter/flutter#165531) 2025-05-13 [email protected] [tool] Fix deprecated API calls within tool (flutter/flutter#168200) 2025-05-13 [email protected] Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (flutter/flutter#168510) 2025-05-13 [email protected] Fixes hero not shown when remove pages without animation (flutter/flutter#168617) 2025-05-13 [email protected] [iOS] Do not hide selection handles when platform hides system context menu (flutter/flutter#168678) 2025-05-13 [email protected] Updated execution path to silently include --start-paused and updated tests (flutter/flutter#168400) 2025-05-13 [email protected] Roll Packages from 6a28ad9 to 2e166de (2 revisions) (flutter/flutter#168736) 2025-05-13 [email protected] [web] Fix multiline input selection in Chrome. (flutter/flutter#168217) 2025-05-13 [email protected] Call xcode_backend.dart from macos_assemble.sh (flutter/flutter#168108) 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] 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

ksokolovskyi · 2025-07-08T15:46:26Z

Hi @BenDevExatech @kayberd, as far as I can see, this fix was not included in Flutter 3.32 and will probably land in Flutter 3.34: https://ismyprinflutteryet.com/#/pr/framework/168217

…tter#168217)

Fix multiline input selection in Chrome.

ecdd2b8

github-actions bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels May 2, 2025

Frogperson mentioned this pull request May 5, 2025

[Web] Click-and-drag to select text in TextField is offset until ending gesture #162698

Closed

mdebbar reviewed May 8, 2025

View reviewed changes

ksokolovskyi added 2 commits May 8, 2025 16:48

Merge branch 'master' into fix-chrome-input-selection

4d27302

Apply review suggestions.

c9dbc7b

mdebbar approved these changes May 8, 2025

View reviewed changes

ksokolovskyi added the autosubmit Merge PR when tree becomes green via auto submit App label May 13, 2025

auto-submit bot added this pull request to the merge queue May 13, 2025

Merged via the queue into flutter:master with commit f50c6c0 May 13, 2025
180 checks passed

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

Frogperson mentioned this pull request May 13, 2025

Mouse pointer jumps up vertically when selecting text reqable/re-editor#63

Closed

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

dc2f237

…tter#168217)

engine-flutter-autoroll mentioned this pull request May 14, 2025

Roll Flutter from 336a7ecf7b40 to 0b9f9288caf3 (22 revisions) flutter/packages#9251

Merged

Piinks mentioned this pull request May 16, 2025

Flutter Notable Commits - 2025 #161460

Open

danagbemava-nc mentioned this pull request May 21, 2025

Dart Web Assertion Error: targetElement == domElement during pointer interaction #169136

Closed

BenDevExatech mentioned this pull request May 21, 2025

Text highlighting/selection issue with Flutter 3.27.2 on Web singerdmx/flutter-quill#2450

Open

1 task

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

ee54cdb

…tter#168217)

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

43db661

…tter#168217)

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

65d063c

…tter#168217)

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

39f0a03

…tter#168217)

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

f50c6c0fc [web] Fix multiline input selection in Chrome. (flutter/flu…

3370103

…tter#168217)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[web] Fix multiline input selection in Chrome. #168217

[web] Fix multiline input selection in Chrome. #168217

Uh oh!

ksokolovskyi commented May 2, 2025 •

edited

Loading

Uh oh!

ksokolovskyi commented May 2, 2025

Uh oh!

mdebbar left a comment

Uh oh!

mdebbar May 8, 2025

Uh oh!

mdebbar left a comment

Uh oh!

ksokolovskyi commented May 8, 2025

Uh oh!

Uh oh!

BenDevExatech commented May 20, 2025

Uh oh!

ksokolovskyi commented Jul 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		final DomElement? eventTargetElement = event.target as DomElement?;
		final DomElement actualTargetElement = eventTarget as DomElement;

	final DomElement? eventTargetElement = event.target as DomElement?;
	final DomElement actualTargetElement = eventTarget as DomElement;
	final DomElement? originalTarget = event.target as DomElement?;

[web] Fix multiline input selection in Chrome. #168217

[web] Fix multiline input selection in Chrome. #168217

Uh oh!

Conversation

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

Uh oh!

Description

Pre-launch Checklist

Uh oh!

ksokolovskyi commented May 2, 2025

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

mdebbar May 8, 2025

Choose a reason for hiding this comment

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

ksokolovskyi commented May 8, 2025

Uh oh!

Uh oh!

BenDevExatech commented May 20, 2025

Uh oh!

ksokolovskyi commented Jul 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ksokolovskyi commented May 2, 2025 •

edited

Loading