Text highlighting/selection issue with Flutter 3.27.2 on Web

[bloemy7]

Have you checked for an existing issue?

• I have searched the existing issues

Flutter Quill Version

10.8.5

Steps to Reproduce

1. Setup project with flutter-quill when running flutter version 3.27.2
2. Try highlighting text to select it

Expected results

Expecting to be able to smoothly select text

Actual results

Almost impossible to select text as it auto-select multiple lines in a very buggy way

Additional Context

The issue seems to be around the precision of the cursor when selecting a line. If you put it exactly at the height of a line, it acts as if it was already slightly above the line, and so it automatically selects the full line. This makes the entire experience impossible to properly control.

I have downgraded Flutter to 3.27.1 and 3.27.0, but there when selecting text it doesn't show the resulting highlight as you are dragging, only once you release the drag, which is not a good experience either.

Any ideas?

[EchoEllet]

10.8.5

Could you try with 11.0.0-dev.20 (or later) as the magnifier has been removed and related issues have been fixed.

[bloemy7]

Hi @EchoEllet, just tried with 11.0.0-dev.21, and it's still happening for me unfortunately.

Screen.Recording.2025-01-21.at.10.29.06.PM.mov

Any other ideas? Thanks!

[EchoEllet]

Is this issue encounterable on Android and iOS, or is this a desktop specific issue?

[bloemy7]

For now we have only seen it on web but I have not tried on the native apps yet, I can get you that information tomorrow.

The main problem we have is that we have the Flutter bug with iOS 18.2 which means that scrolling on iOS web does not work since we still run Flutter 24, but upgrading to 27 causes this issue so I’m stuck in between both. Any help would be amazing!

[jonasbernardo]

I tested it here, on Android the selection with a bluetooth mouse works normally, the problem only happens in the web version, another problem is also when clicking on empty lines, the cursor always appears on the top line and not on the clicked line, but it needs to be between two text when there is an empty space

[EchoEllet]

The main problem we have is that we have the Flutter bug with iOS 18.2 which means that scrolling on iOS web does not work since we still run Flutter 24

Is this a different issue than the text selection?

[bloemy7]

Yes that is a separate bug that is not related to flutter-quill at all, sorry for the confusion here. But it's a bug that forces us to update Flutter version, except that we cannot because of this bug @EchoEllet .

[CatHood0]

I cannot reproduce this issue in Flutter 3.27.3 and the package version 11.0.0-dev.20

[jonasbernardo]

yes, the problem persisted, I recorded a video running the example within the flutter quill package
@CatHood0
@bloemy7
@EchoEllet

bug-selecao.mp4

[Heyholder]

i have same issue. did you fix it?

2025-02-13.1.46.04.mov

[bloemy7]

I just tried with the latest Flutter 3.29.0 stable release and unfortunately this still reproduces. @CatHood0 are you maybe able to reproduce? Can this get investigated in some way? I'm happy to help contribute but not quite sure where to start on this issue.
This is causing major issue in production apps and seems to be widely reproducible on very basic configurations.

Thanks a lot.

[jonasbernardo]

@bloemy7
@CatHood0
@EchoEllet
new information, the problem does not happen if you are using mozilla firefox or the latest version of google chrome

[realth000]

Is this the same issue in flutter dev tools?

For example, in dev tools -> network -> select a request -> goto the Response tab on the right side, select some text and a similar issue occurs if the text is multi line.

• Flutter 3.29.0, Chrome on Windows.

[jonasbernardo]

update from my latest tests: text selection only works in mozilla firefox

[dominikkeller]

I am experiencing the same issue in all browsers except Safari and Firefox.
This is a significant issue for our application.

Flutter version: 3.27.2.

[hannutho]

@jonasbernardo
@bloemy7
@CatHood0
@EchoEllet
Safari on Mac also works.
Anyone found any workaround or fix for this?

[RJustoX]

Hi everyone, I'm encountering the same issue.

I noticed that adding the following code:

customStyles: DefaultStyles(
  paragraph: DefaultTextBlockStyle(
    // your textStyle
    const HorizontalSpacing(4, 4),
    const VerticalSpacing(4, 4),
    const VerticalSpacing(4, 4),
    null,
  ),
),

is causing the selection to extend four lines above the text I want to select. Without this, it only selects the line I want plus one. Has anyone else experienced this?

flutter 3.27.3 | quill 11.0.0 | testing on chrome

[bloemy7]

@CatHood0 it seems like this issue is becoming more widespread and probably should be more thoroughly investigated at this point as it makes the editor as such unusable. If anyone has any thoughts on how to proceed here it would be great...

[Heyholder]

below is my quillEditor setting.

final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
    const HorizontalSpacing baseHorizontalSpacing = HorizontalSpacing(0, 0);
    const VerticalSpacing baseVerticalSpacing = VerticalSpacing(0, 12);
    return QuillEditor.basic(
      controller: quillController,
      configurations: QuillEditorConfigurations(
        minHeight: minHeight,
        embedBuilders: FlutterQuillEmbeds.editorWebBuilders(),
        showCursor: showCursor,
        padding: const EdgeInsets.all(16),
        placeholder: hintText,
        enableSelectionToolbar: false,
        customStyles: DefaultStyles(
          h1: DefaultTextBlockStyle(
              defaultTextStyle.style.copyWith(
                  fontSize: 36, height: 1.65, fontWeight: FontWeight.w700),
              baseHorizontalSpacing,
              baseVerticalSpacing,
              VerticalSpacing.zero,
              null),
          h2: DefaultTextBlockStyle(
              TextStyle(
                fontSize: 24,
                height: 1.65,
                fontWeight: FontWeight.w600,
              ),
              baseHorizontalSpacing,
              baseVerticalSpacing,
              VerticalSpacing.zero,
              null),
          h3: DefaultTextBlockStyle(
              TextStyle(
                  height: 1.65, fontSize: 20, fontWeight: FontWeight.w600),
              baseHorizontalSpacing,
              baseVerticalSpacing,
              VerticalSpacing.zero,
              null),
          paragraph: DefaultTextBlockStyle(
              defaultTextStyle.style.copyWith(fontSize: 20, height: 1.65),
              baseHorizontalSpacing,
              baseVerticalSpacing,
              VerticalSpacing.zero,
              null),
          lists: DefaultListBlockStyle(
              TextStyle(fontSize: 20, height: 1.65),
              baseHorizontalSpacing,
              baseVerticalSpacing,
              VerticalSpacing.zero,
              null,
              null),
          sizeHuge: TextStyle(
            height: 1.65,
            fontSize: 24,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );

[dominikkeller]

@RJustoX
I experienced something similar. In my case, it was due to the editor’s padding. Without the padding, it would select the line I wanted plus one extra, but not as many as 4-5 lines.

Edit:
I removed all VerticalSpacing attributes or set them to 0 in my customSytles and with this the web editors work perfectly fine.
This is not really an option sadly as it makes the editor look bad.

[jonasbernardo]

@dominikkeller
In my case this didn't work, the problem persists even with zero vertical space

[CatHood0]

I have the same Issues came here for a solution...
is it a RenderEditableTextLine problem?

I can't say for sure. It could be a logic issue just like it could be anything else. As i mentioned above, since i can't reproduce the problem yet, i'm unable to begin to check what could be wrong. I mentioned RenderEditableTextLine since it is responsible for handling the text selection.

[Demetriox]

In safari it does not happen, but on chrome It does, if that helps

[Demetriox]

Grabacion.de.pantalla.2025-02-21.a.la.s.10.19.19.a.m.mov

In safari it does not happen, but on chrome It does, if that helps

Google Chrome
Chrome está actualizado
Versión 133.0.6943.127 (Build oficial) (arm64)

this is my chrome version

[CatHood0]

I have already updated to the latest version of flutter (3.29.0) and I'm not able to reproduce this problem either. I used chrome and it worked exactly as I expected.

[CatHood0]

@EchoEllet If you have some free time, could you see if you are able to reproduce this issue in recent versions of Flutter?

[dominikkeller]

@CatHood0
So I just upgraded to Flutter 3.29.0. So me setup is now:

Flutter Version: 3.29.0
flutter_quill: 11.0.0
flutter_quill_extensions: ^11.0.0
Chrome Version: 133.0.6943.127 (Official Build) (arm64)

Still no changes, and same issue.

[jonasbernardo]

@CatHood0
this problem happens only on web, on android and ios it is working fine

[Demetriox]

I have the problem on Web

[EchoEllet]

I can confirm the issue, reproduced on Google Chrome using Flutter stable 3.29.0 Dart 3.7.0.

WebBug.mov

[RJustoX]

I have this problem on windows 11

[ChiHoc]

For me, I encountered the same issue with Flutter's native TextField. When I tried replacing TextField with Quill, the problem still persisted. Maybe this issue is not related to Quill itself.

Flutter: 3.27.4
flutter_quill: 11.0.0-dev.20
Chrome: 133.0.6943.142（Stable） (arm64)
MacOS: 15.1

[GuillermoDLCO]

I also have same issue.

Flutter: 3.27.4
flutter_quill: 11.0.0-dev.21
MacOS: 15.3.1

[theAugur]

Just wanted to confirm that I´m having the same issue when using quill editor in chrome.. both in windows and android. Oddly enough this does not happen when using firefox on windows.

Flutter: 3.29.2
flutter_quill: flutter_quill: ^11.1.0

[jezell]

Hey guys, put together a PR for tihs:

flutter/flutter#165732

Fixes an issue in the Flutter engine

[CatHood0]

I knew I wasn't crazy! But I really didn't know where the problem lay in Flutter (I don't quite understand the project structure). I'm glad you're getting it fixed. Thanks for taking the time to do this and let us know!

[jezell]

Yeah you aren't crazy. It's impacting every editor and the core text fields. I've also seen impacting re_editor as well. Glad to help out. Seems to be a fairly widespread problem for anything editing text on web in the last few releases.

[aleripe]

Hey guys, put together a PR for tihs:

flutter/flutter#165732

Fixes an issue in the Flutter engine

Unfortunately the fix doesn't work. Fixes the position while dragging, but makes it wrong when the mouse gets released...

[jezell]

@aleripe I discovered the real problem was a bit deeper in the engine and also impacted scrollbars due to improper mouse pointer calculation.

If you are running Flutter 3.29.2 and want a patch so scrollbars and textboxes aren't screwed up. Replace your flutter_web_sdk in flutter/bin/cache with the one in here:

https://storage.googleapis.com/flutter-builds/releases/3.29.2/flutter_web_sdk.zip

Will push the patch to flock later this week. Let me know if you have issues with it. The mouse position is correct on drag and release. Also fixes the scrollbars.

[aleripe]

@aleripe I discovered the real problem was a bit deeper in the engine and also impacted scrollbars due to improper mouse pointer calculation.

If you are running Flutter 3.29.2 and want a patch so scrollbars and textboxes aren't screwed up. Replace your flutter_web_sdk in flutter/bin/cache with the one in here:

https://storage.googleapis.com/flutter-builds/releases/3.29.2/flutter_web_sdk.zip

Will push the patch to flock later this week. Let me know if you have issues with it. The mouse position is correct on drag and release. Also fixes the scrollbars.

Thanks for your kind reply! I just tried your patch and it works, indeed.
I fully understand your frustration, but PLEASE don't give up on Flutter. Their team is not the best, but the whole community is :)

[jezell]

Yeah not giving up on Flutter, just taking a different path. Anyone can always do a PR with any flock patch back to Flutter. I just would rather spend my time fixing things than fighting the system :)