When trying to click-drag the scroll bar, it selects the underlying text instead

[TechnicJelle]

Describe the bug I have a code editor where I have set the horizontal and vertical scrollbars to be permanently visible. When I try to scroll, the text behind the scroll bar is selected, instead of the scroll bar. Only sometimes do I manage to grab the bar itself.

The issue is most noticeable with the vertical scroll bar, where it actually selects through many lines. But you can also see it happening with the horizontal scroll bar. Except there, it doesn't select, but it just moves the text editing cursor (caret) where you click.

To Reproduce Steps to reproduce the behaviour:

1. Copy this code into a fresh Flutter project:

import 'package:flutter/material.dart';
import 'package:re_editor/re_editor.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final codeController = CodeLineEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ScrollbarTheme(
          data: Theme.of(context).scrollbarTheme.copyWith(
                radius: const Radius.circular(2),
                thumbVisibility: const WidgetStatePropertyAll(true),
                trackVisibility: const WidgetStatePropertyAll(true),
              ),
          child: CodeEditor(
            indicatorBuilder: (context, editingController, chunkController, notifier) {
              return DefaultCodeLineNumber(
                notifier: notifier,
                controller: editingController,
              );
            },
            style: const CodeEditorStyle(fontFamily: "monospace"),
            controller: codeController,
            wordWrap: false,
            scrollbarBuilder: (context, child, details) {
              return Scrollbar(
                controller: details.controller,
                child: child,
              );
            },
          ),
        ),
      ),
    );
  }
}

2. Run it
3. Copy or type a bunch of text into it
4. Shrink the window until it becomes horizontally scrollable
5. Click and drag the vertical scroll bar to try to scroll up or down

Expected behaviour I would expect it to grab a hold of the scroll bar itself, instead of the text behind it.

Screenshots It is difficult to show this happening in a screenshot, so here are two videos instead:

Here is the issue happening in my actual Flutter app:

https://github.com/user-attachments/assets/4f2a4af9-5312-4651-afda-6776733a9cb5

And here is the issue happening in the minimal reproducible example I sent above:

https://github.com/user-attachments/assets/2465e0d6-b098-423e-b0dc-a042add89d0c

Device:

• OS: Manjaro Linux x86_64
• Version Kernel: 6.6.47-1-MANJARO

Additional context It could be that this is just a misconfiguration on my part, but if it is, I would love to know how I can fix it!

By the way, thank you for making this library. It's absolutely incredible. I really love it!

[MegatronKing]

Fixed on v0.4.0.

[TechnicJelle]

Wow, that was fast! I really appreciate it!!! :purple_heart:

[TechnicJelle]

https://github.com/user-attachments/assets/205dcac6-d6e6-4c3a-8c1b-a675750fd5b8

(I made the scrollbars a bit bigger, to make them easier to click, now)

Though, regretfully, I must say the issue still happens, even on 0.4.0...

[MegatronKing]

Maybe you need to tell the editor the width of the scroll bar. I'll consider how to support this.

[MegatronKing]

Now you can use verticalScrollbarWidth and horizontalScrollbarHeight to tell editor the size of your scrollbar.

[TechnicJelle]

I am very sorry to say that, even when specifying the verticalScrollbarWidth and horizontalScrollbarHeight, it still selects the text through the scrollbar sometimes... :cry:

https://github.com/user-attachments/assets/42f3cc0b-cd53-4b51-8546-ba1b5d2d430f

---

It also seems that the scrollbar loses the mouse drag when the horizontal scrollbar appears or disappears. When the program first starts, there is no text cursor in the editor yet, and that is when this happens. Then, when you click in the editor, the text cursor appears, and then the earlier issue happens.

https://github.com/user-attachments/assets/276f32c4-50ff-4ce1-94fb-bc7ba28f1b9a

I apologise for reporting this bug again and again :sweat_smile:

[MegatronKing]

That is strange, I can not reproduce this issue on my demo project.

import 'package:flutter/material.dart';
import 'package:re_editor/re_editor.dart';

class BasicField extends StatelessWidget {

  const BasicField({super.key});

  @override
  Widget build(BuildContext context) {
    return CodeEditor(
      wordWrap: false,
      controller: CodeLineEditingController.fromText(('${'Hello Reqable💐👏 ' * 10}\n') * 100),
      verticalScrollbarWidth: 20,
      scrollbarBuilder: (context, child, details) {
        return Scrollbar(
          controller: details.controller,
          thickness: 20,
          child: child,
        );
      },
    );
  }
}

https://github.com/user-attachments/assets/245fc4bd-4819-435d-a2ed-39b777398dff

[alsemitoo]

I think the problem is because you (@MegatronKing) always have vertical and horizontal scroll. In @TechnicJelle 's example, it fails when a line that "needs" horizontal scroll appears or disapears in the screen.

[TechnicJelle]

That could be, yeah! I definitely noticed some strange behaviours regarding that.

[TechnicJelle]

Also, the video you sent (2.mov) seems to be a 0 byte file...

[MegatronKing]

@TechnicJelle Please try this ref b37a7151780803c1d0145a182dc9d59d95b4f3a3

[alsemitoo]

I tried it with the same configuration as you and still did not get it to work. It appears it works fine when no horizontal scrolling is needed, but as soon as horizontal scrolling appears, vertical scrolling stops working properly.

  const BasicField({super.key});

  @override
  Widget build(BuildContext context) {
    return CodeEditor(
      wordWrap: false,
      controller: CodeLineEditingController.fromText(
          ('${'Hello Reqable💐👏 ' * 10}\n') * 100),
      horizontalScrollbarHeight: 20,
      verticalScrollbarWidth: 20,
      scrollController: CodeScrollController(
        verticalScroller: ScrollController(),
        horizontalScroller: ScrollController(),
      ),
      scrollbarBuilder: (context, child, details) {
        return Scrollbar(
          controller: details.controller,
          thickness: 20,
          child: child,
        );
      },
    );
  }
}

https://github.com/user-attachments/assets/6e1b8ada-0a04-47e3-b462-3c3247248523

[MegatronKing]

@TechnicJelle Please try this ref b37a715

I think we have fixed on this commit.

[TechnicJelle]

I will try it soon! Hopefully this weekend...

[TechnicJelle]

Well, I suppose the issue with it selecting the text behind the scrollbar has been fixed... But there is now a new problem: when I click-drag the scrollbar, it loses grip.

https://github.com/user-attachments/assets/c1bda0e1-1941-45a6-9c0f-b937eb683fc6

I finally found a little program to highlight my mouse presses, so you can see exactly when I am clicking and dragging. (Yellow is normal, red is mouse button down)

Should this issue be closed and a new one be opened for this new problem? Or can we continue using this one?

[TechnicJelle]

I should also mention that I tried the latest commit from main as well (fb361506f00839653230d092fc0d6a442d8e82d4) but that has the same (or similar) issues...

[alsemitoo]

I tried it with the same configuration as you and still did not get it to work. It appears it works fine when no horizontal scrolling is needed, but as soon as horizontal scrolling appears, vertical scrolling stops working properly.

  const BasicField({super.key});

  @override
  Widget build(BuildContext context) {
    return CodeEditor(
      wordWrap: false,
      controller: CodeLineEditingController.fromText(
          ('${'Hello Reqable💐👏 ' * 10}\n') * 100),
      horizontalScrollbarHeight: 20,
      verticalScrollbarWidth: 20,
      scrollController: CodeScrollController(
        verticalScroller: ScrollController(),
        horizontalScroller: ScrollController(),
      ),
      scrollbarBuilder: (context, child, details) {
        return Scrollbar(
          controller: details.controller,
          thickness: 20,
          child: child,
        );
      },
    );
  }
}

widget_test.mp4

@MegatronKing Sorry to keep bringing this up, but have you been able to reproduce the issue with this code? I still have not been able to make it work, even with the latest commits.