[Bug] Editor auto-scrolling when pressing space too quickly if placed inside a scrollview on web desktop

[alessandroderomawep]

Bug Description

When placed inside a scrollview, if you press the space too quickly after typing something, the space gets ignored (eg you pressed it but it doesn't get appended to the editor content) and instead the view gets scrolled down as if the editor requested focus.

How to Reproduce

Repro steps

• Launch the sample app from the MCVE below
• Make sure the content overflows the page vertically - if it doesn't, resize your window to activate the vertical scrollbar
• Make sure you scroll all the way up (you should see the text "click below and write something" on the very bottom of the page)
• Click below the text, you'll see the cursor light up on the editor
• Type, very fast "asd[space]"
• Watch "asd" being written, space being skipped and the page being scrolled all the way down

MCVE

main.dart

import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
EditorState editorState = EditorState.blank();
ValueNotifier<List<String>> keyEvents = ValueNotifier([]);

@override
void initState() {
  ServicesBinding.instance.keyboard.addHandler((k) {
    if (k is KeyDownEvent) {
      keyEvents.value.add('KeyDown "${k.character}"');
      keyEvents.notifyListeners();
    }
    return false;
  });
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 500),
          ValueListenableBuilder(
            valueListenable: keyEvents,
            builder: (context, value, child) {
              return Wrap(
                children: value
                    .map(
                      (e) => Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8),
                          child: Text(e),
                        ),
                      ),
                    )
                    .toList(),
              );
            },
          ),
          const Text('Click below and write something'),
          const Divider(),
          SizedBox(
            height: 700,
            child: AppFlowyEditor(
              editorState: editorState,
            ),
          ),
        ],
      ),
    ),
  );
}
}

pubspec.yaml

name: test_app
description: A new Flutter project.

version: 1.0.0+1

environment:
sdk: '>=3.0.5 <4.0.0'

dependencies:
flutter:
  sdk: flutter

cupertino_icons: ^1.0.2
appflowy_editor: ^2.3.4

dev_dependencies:
flutter_test:
  sdk: flutter

flutter_lints: ^2.0.0

flutter:
uses-material-design: true

Expected Behavior

The space key should just write a blank space on the editor without engaging the scroll.

Operating System

All OS, Web

AppFlowy Editor Version(s)

2.3.4

Flutter 3.19.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision abb292a07e (9 weeks ago) • 2024-02-20 14:35:05 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

Screenshots

Video demonstrating the issue

Flutter.Demo.-.Google.Chrome.2024-04-25.10-58-21.mp4

Additional Context

It seems the issue is related to Line 141 to 149 of keyboard_service_widget.dart - I tried noob-solving the issue by completely removing those lines and the issue was gone.

Of course removing that code is not the solution (I mean, I'm assuming it's there for a reason), so could it be that the if condition should be different?

[hbedford]

exactly what happen with me, but only happen on the web version. if we have any singlescrollview on top of editor this break the input using spaces characters