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

[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 :)

[andrescastane]

Any updates? Is there any Flutter version where this error doesn’t occur?

I've tested it with flutter_quill version 10.8.3, and the issue still persists, so it does seem very likely to be a Flutter engine issue as mentioned.
Also, everything works correctly on both Windows and macOS — I'm only experiencing this problem on Flutter Web.

If there’s a specific older version of Flutter where this bug doesn’t happen, I’d really appreciate knowing about it.

[BenDevExatech]

Any updates? Is there any Flutter version where this error doesn’t occur?

I've tested it with flutter_quill version 10.8.3, and the issue still persists, so it does seem very likely to be a Flutter engine issue as mentioned. Also, everything works correctly on both Windows and macOS — I'm only experiencing this problem on Flutter Web.

If there’s a specific older version of Flutter where this bug doesn’t happen, I’d really appreciate knowing about it.

I'm facing the same issue, and I can confirm that it occurs specifically on Web with Chrome engine (on Edge and Opera too), but it's OK with Firefox and Safari, also OK on Desktop.

I've tried the current fix version here :
flutter/flutter#168217

Based on the last flutter_quill version 11.4.1 with flutter_quill_extensions version11.0.0, and unfortunately the pb still occurs...
It should be noted that the problem does not occur on a simple multi-line TextField.

There is also a concrete pb with scrolling down when selectionning.

This video shows comparison between flutter_quill and simple multiline TextField :

flutter_quill_Text.highlighting_selection_issue_compressed.mp4