[Bug] Editor auto-scrolling when pressing space too quickly if placed inside a scrollview on web desktop
Opened this issue · 0 comments
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?