[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 robert.ancell@canonical.com Fix Linux Impeller support broken by incorrect deletion of stencil buffer. (flutter/flutter#168668) 2025-05-14 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from 6J81agNhuK4q255Jj... to fSvuEJgRmHxnewRJr... (flutter/flutter#168794) 2025-05-14 matanlurey@users.noreply.github.com Run `{Platform} flutter_packaging` builders on release candidates. (flutter/flutter#168762) 2025-05-14 matanlurey@users.noreply.github.com Remove `docs_deploy_beta`, fix `docs_publish`, add comments. (flutter/flutter#168754) 2025-05-14 32538273+ValentinVignal@users.noreply.github.com Add `titleAlignment` to `CheckboxListTile` and `RadioListTile` (flutter/flutter#168666) 2025-05-14 32538273+ValentinVignal@users.noreply.github.com Remove deprecated todo about caching (flutter/flutter#168534) 2025-05-13 mohellebiabdessalem@gmail.com Replace hardcoded host and app level build.gradle paths with `AndroidProject`-level getters in `gradle_errors.dart` (flutter/flutter#167949) 2025-05-13 75997342+dogaozyagci@users.noreply.github.com Improve documentation for KeyedSubtree constructor (flutter/flutter#167198) 2025-05-13 31859944+LongCatIsLooong@users.noreply.github.com Wire up the system text scaler from `PlatformDispatcher` (flutter/flutter#159999) 2025-05-13 engine-flutter-autoroll@skia.org Roll Dart SDK from 645d04a7a964 to b3520981e0f0 (3 revisions) (flutter/flutter#168721) 2025-05-13 jhy03261997@gmail.com [a11y] Semanctis flag refactor step 3: framework part (flutter/flutter#167771) 2025-05-13 matanlurey@users.noreply.github.com 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 muhatashim@google.com Use live region in error text input decorator for Android (flutter/flutter#165531) 2025-05-13 kevmoo@users.noreply.github.com [tool] Fix deprecated API calls within tool (flutter/flutter#168200) 2025-05-13 victorsanniay@gmail.com Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (flutter/flutter#168510) 2025-05-13 47866232+chunhtai@users.noreply.github.com Fixes hero not shown when remove pages without animation (flutter/flutter#168617) 2025-05-13 rmolivares@renzo-olivares.dev [iOS] Do not hide selection handles when platform hides system context menu (flutter/flutter#168678) 2025-05-13 jessy.yameogo@gmail.com Updated execution path to silently include --start-paused and updated tests (flutter/flutter#168400) 2025-05-13 engine-flutter-autoroll@skia.org Roll Packages from 6a28ad9 to 2e166de (2 revisions) (flutter/flutter#168736) 2025-05-13 sokolovskyi.konstantin@gmail.com [web] Fix multiline input selection in Chrome. (flutter/flutter#168217) 2025-05-13 15619084+vashworth@users.noreply.github.com 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 stuartmorgan@google.com 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 robert.ancell@canonical.com Fix Linux Impeller support broken by incorrect deletion of stencil buffer. (flutter/flutter#168668) 2025-05-14 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from 6J81agNhuK4q255Jj... to fSvuEJgRmHxnewRJr... (flutter/flutter#168794) 2025-05-14 matanlurey@users.noreply.github.com Run `{Platform} flutter_packaging` builders on release candidates. (flutter/flutter#168762) 2025-05-14 matanlurey@users.noreply.github.com Remove `docs_deploy_beta`, fix `docs_publish`, add comments. (flutter/flutter#168754) 2025-05-14 32538273+ValentinVignal@users.noreply.github.com Add `titleAlignment` to `CheckboxListTile` and `RadioListTile` (flutter/flutter#168666) 2025-05-14 32538273+ValentinVignal@users.noreply.github.com Remove deprecated todo about caching (flutter/flutter#168534) 2025-05-13 mohellebiabdessalem@gmail.com Replace hardcoded host and app level build.gradle paths with `AndroidProject`-level getters in `gradle_errors.dart` (flutter/flutter#167949) 2025-05-13 75997342+dogaozyagci@users.noreply.github.com Improve documentation for KeyedSubtree constructor (flutter/flutter#167198) 2025-05-13 31859944+LongCatIsLooong@users.noreply.github.com Wire up the system text scaler from `PlatformDispatcher` (flutter/flutter#159999) 2025-05-13 engine-flutter-autoroll@skia.org Roll Dart SDK from 645d04a7a964 to b3520981e0f0 (3 revisions) (flutter/flutter#168721) 2025-05-13 jhy03261997@gmail.com [a11y] Semanctis flag refactor step 3: framework part (flutter/flutter#167771) 2025-05-13 matanlurey@users.noreply.github.com 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 muhatashim@google.com Use live region in error text input decorator for Android (flutter/flutter#165531) 2025-05-13 kevmoo@users.noreply.github.com [tool] Fix deprecated API calls within tool (flutter/flutter#168200) 2025-05-13 victorsanniay@gmail.com Clip search artifacts in CupertinoSliverNavigationBar searchable-to-searchable transitions (flutter/flutter#168510) 2025-05-13 47866232+chunhtai@users.noreply.github.com Fixes hero not shown when remove pages without animation (flutter/flutter#168617) 2025-05-13 rmolivares@renzo-olivares.dev [iOS] Do not hide selection handles when platform hides system context menu (flutter/flutter#168678) 2025-05-13 jessy.yameogo@gmail.com Updated execution path to silently include --start-paused and updated tests (flutter/flutter#168400) 2025-05-13 engine-flutter-autoroll@skia.org Roll Packages from 6a28ad9 to 2e166de (2 revisions) (flutter/flutter#168736) 2025-05-13 sokolovskyi.konstantin@gmail.com [web] Fix multiline input selection in Chrome. (flutter/flutter#168217) 2025-05-13 15619084+vashworth@users.noreply.github.com 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 stuartmorgan@google.com 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!

Uh oh!

		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!

Uh oh!

ksokolovskyi commented May 2, 2025 •

edited

Loading