Text highlighting/selection issue with Flutter 3.27.2 on Web

[bloemy7]

Have you checked for an existing issue?

• [x] 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.

https://github.com/user-attachments/assets/92c13c2c-5279-453e-82ed-7f320a73ab16

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

[jonasbernardo]

i use 11.0.0-dev.20

[jonasbernardo]

These 2 problems are big, which makes the web version very difficult to use, it should be fixed urgently @EchoEllet @CatHood0

[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

[bloemy7]

@jonasbernardo are you able to reproduce as well with the above configuration?

[jonasbernardo]

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

https://github.com/user-attachments/assets/a8da7fbb-1595-48dc-878a-f889ba77f396

[jonasbernardo]

I just forgot to activate the mouse pointer, but in the video I'm trying to select a word and it selects a bunch of things that I didn't select

[jonasbernardo]

@CatHood0 @EchoEllet @singerdmx Would you have any tips so I can investigate?

[bloemy7]

@jonasbernardo @CatHood0 @singerdmx @EchoEllet is there any update on this issue? This is having a real impact in production apps. Thanks a lot and I'd love to help investigate.

[EchoEllet]

Unfortunately, no, I'm not related to this issue/topic. Otherwise, I would have fixed it right away.

Fixing the issue will likely create more bugs, and since we don't have good coverage, docs, as discussed in previous threads.

[Heyholder]

i have same issue. did you fix it?

https://github.com/user-attachments/assets/33cbd1f2-4881-4dc5-98b0-269f787a6413

[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]

I also want to investigate, but I don't know where to start

[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

[jonasbernardo]

This problem has a peculiarity, after you release the mouse it selects in the right place, but while you are holding the mouse button to select, it selects everything wrong, but after you release the mouse button in the right place, it selects the text correctly. The problem appears to be in this part of the selection rendering while the mouse button is being held to adjust the selection