AppFlowy-IO / AppFlowy-IO/appflowy-editor
[Bug] Editor auto-scrolling when pressing space too quickly if placed inside a scrollview on web desktop
- Lingua principale
- Dart
- Stelle
- 684
- Fork
- 329
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
### 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
```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 createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
EditorState editorState = EditorState.blank();
ValueNotifier> 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
```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**
https://github.com/AppFlowy-IO/appflowy-editor/assets/126804521/37080a03-0220-4680-bf68-a48c0158fb9f
### Additional Context
It seems the issue is related to [Line 141 to 149 of keyboard_service_widget.dart](https://github.com/AppFlowy-IO/appflowy-editor/blob/680ada4fd865b1c0bcdba1b673621a8301eeb146/lib/src/editor/editor_component/service/keyboard_service_widget.dart#L141C1-L149C1) - 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?
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Valutazione
Questa issue non è ancora stata valutata.