QuillEditor does not rebuild when scrolling

[putnokiabel]

Is there an existing issue for this?

• I have searched the existing issues

Flutter Quill version

9.3.21

Steps to reproduce

1. Create a new app with flutter create quill_test
2. Replace main.dart with the code sample
3. Run the app
4. Note that QuillEditor is scrollable
5. Switch to tab 2 by tapping on "2" in the top right corner
6. Note that QuillEditor is no longer scrollable

Additionally, note that if in tab 2 you make a scrolling motion (even though the widget does not scroll yet), and then tap on QuillEditor, it is now scrolled. This indicates that the QuillEditor widget does properly receive the scroll gesture, but the widget does not rebuild (and show the scrolled state) until you tap on it.
If you then go back to tab 1, the same issue occurs. See video demonstration below.

Expected results

QuillEditor is scrollable regardless of the tab, and regardless of whether you tap on the widget or not.

Actual results

When QuillEditor is within a TabBarView, it is no longer scrollable after switching tabs.
See video demonstration below.

Code sample

Code sample

import 'package:flutter/material.dart';

import 'package:flutter_quill/flutter_quill.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quill scroll bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            TabBar(
              tabs: [
                Tab(text: '1'),
                Tab(text: '2'),
              ],
            ),
            Expanded(
              child: TabBarView(
                children: [
                  QuillTest(),
                  QuillTest(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<QuillTest> createState() => _QuillTestState();
}

class _QuillTestState extends State<QuillTest> {
  final QuillController controller = QuillController(
    document: Document()
      ..insert(
        0,
        [for (var i = 0; i < 100; i++) i.toString()].join('\n'),
      ),
    selection: const TextSelection.collapsed(offset: 0),
    readOnly: true,
  );

  @override
  Widget build(BuildContext context) {
    return QuillEditor.basic(
      configurations: QuillEditorConfigurations(
        controller: controller,
        scrollable: true,
        autoFocus: true,
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

https://github.com/singerdmx/flutter-quill/assets/29568469/d1328ee4-f8bf-469b-9543-77a0226f313f

Logs

Logs

No logs.

[salba360496]

QuillEditor has focusNode property try to use it to set back the focus on quill editor when it is in view
or use autofocus property.

[putnokiabel]

QuillEditor has focusNode property try to use it to set back the focus on quill editor when it is in view or use autofocus property.

@salba360496
I've already set autofocus to true. I've also tried setting focusNode and requesting focus when switching tabs, unfortunately it did not have an effect.

I suspect the problem is not with focus, but something else. Since the widget clearly does receive the scroll gesture, it just doesn't always re-render the widget upon scrolling (until you tap on it). Perhaps a missing setState or notifyListeners somewhere?

[CatHood0]

I resolve this issue using this:

bool canScroll = false; //set to false to apply just at the first time the setState
//Scrollbar is optional, any widget that uses notificationPredicate for scroll can resolve this (i guess)
Scrollbar(
  notificationPredicate: (notification) {
      if (!canScroll) {
           canScroll = true;
          setState(() {});
      }
      return notification.depth == 0;
  },
  child: <you editor>
),

[putnokiabel]

I resolve this issue using this:

bool canScroll = false; //set to false to apply just at the first time the setState
//Scrollbar is optional, any widget that uses notificationPredicate for scroll can resolve this (i guess)
Scrollbar(
  notificationPredicate: (notification) {
      if (!canScroll) {
           canScroll = true;
          setState(() {});
      }
      return notification.depth == 0;
  },
  child: <you editor>
),

Thank you @CatHood0 , this workaround seems to fix it! I'll use this for now :)
Would be great to eventually incorporate it into flutter_quill so the workaround isn't needed and other people don't run into the issue either!

[CatHood0]

@AtlasAutocode do you have idea where can be the issue with the scroll?

This just happens when you use a Scrollbar (in my case).

[AtlasAutocode]

I created a project following OP instructions and added the latest Flutter Quill package.
On Windows: Both tabs scroll using mouse wheel and I can switch back and forth with no problems. I can also drag the scrollbar and both tabs scroll.

I repeated the test on an Android emulator - switching between tabs was difficult because clicks did not register (seem to be obscured by a title bar?) but I could use the tab key to switch - again, the content of both tabs was scrollable using drag action.

One time on windows, however, switching to Tab-2 and using the scroll bar did NOT work. Can't reproduce this so perhaps there is some time-sensitive initialization of something. This would tie into your fix of calling setState to reset/re-initialize the editor state. My guess is the problem is with scrollController but I can't find where or how it is used.

I have found in raw_editor_state.dart:

late ScrollController _scrollController;

it is set in initState function (L1107)

_scrollController = widget.configurations.scrollController;

This might not get initialized if something asserted prior to its call and would explain why your fix works.
I would also suggest seeing if you can get the same scroll failure effect when using a release build - I have found that asserts in debug mode don't always get reported (silent failure) but can prevent subsequent code execution and are very difficult to diagnose.