fix: ensure the focus of emoji_search_bar not be lost within a second

AppFlowy-IO · Dec 25, 2024 · 7422ea2 · 7422ea2
1 parent 0cf25f1
commit 7422ea2
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart b/frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart
@@ -1,8 +1,12 @@
+import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flowy_infra_ui/style_widget/text_field.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -105,6 +109,45 @@ void main() {
     }
   });
 
+  testWidgets('Emoji Search Bar Get Focus', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      await tester.openPage(
+        value.name,
+        layout: value,
+      );
+      final title = find.descendant(
+        of: find.byType(ViewTitleBar),
+        matching: find.text(value.name),
+      );
+      await tester.tapButton(title);
+      await tester.tapButton(find.byType(EmojiPickerButton));
+
+      final emojiPicker = find.byType(FlowyEmojiPicker);
+      expect(emojiPicker, findsOneWidget);
+      final textField = find.descendant(
+        of: emojiPicker,
+        matching: find.byType(FlowyTextField),
+      );
+      expect(textField, findsOneWidget);
+      final textFieldWidget =
+          textField.evaluate().first.widget as FlowyTextField;
+      assert(textFieldWidget.focusNode!.hasFocus);
+    }
+  });
+
   testWidgets('Update page icon in sidebar', (tester) async {
     await tester.initializeAppFlowy();
     await tester.tapAnonymousSignInButton();

diff --git a/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart b/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart
@@ -18,10 +18,12 @@ class FlowyEmojiPicker extends StatefulWidget {
     super.key,
     required this.onEmojiSelected,
     this.emojiPerLine = 9,
+    this.ensureFocus = false,
   });
 
   final EmojiSelectedCallback onEmojiSelected;
   final int emojiPerLine;
+  final bool ensureFocus;
 
   @override
   State<FlowyEmojiPicker> createState() => _FlowyEmojiPickerState();
@@ -97,6 +99,7 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: FlowyEmojiSearchBar(
             emojiData: emojiData,
+            ensureFocus: widget.ensureFocus,
             onKeywordChanged: (value) {
               keyword.value = value;
             },

diff --git a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/emoji_search_bar.dart b/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/emoji_search_bar.dart
@@ -15,12 +15,14 @@ typedef EmojiSkinToneChanged = void Function(EmojiSkinTone skinTone);
 class FlowyEmojiSearchBar extends StatefulWidget {
   const FlowyEmojiSearchBar({
     super.key,
+    this.ensureFocus = false,
     required this.emojiData,
     required this.onKeywordChanged,
     required this.onSkinToneChanged,
     required this.onRandomEmojiSelected,
   });
 
+  final bool ensureFocus;
   final EmojiData emojiData;
   final EmojiKeywordChangedCallback onKeywordChanged;
   final EmojiSkinToneChanged onSkinToneChanged;
@@ -51,6 +53,7 @@ class _FlowyEmojiSearchBarState extends State<FlowyEmojiSearchBar> {
           Expanded(
             child: _SearchTextField(
               onKeywordChanged: widget.onKeywordChanged,
+              ensureFocus: widget.ensureFocus,
             ),
           ),
           const HSpace(8.0),
@@ -111,9 +114,11 @@ class _RandomEmojiButton extends StatelessWidget {
 class _SearchTextField extends StatefulWidget {
   const _SearchTextField({
     required this.onKeywordChanged,
+    this.ensureFocus = false,
   });
 
   final EmojiKeywordChangedCallback onKeywordChanged;
+  final bool ensureFocus;
 
   @override
   State<_SearchTextField> createState() => _SearchTextFieldState();
@@ -123,6 +128,17 @@ class _SearchTextFieldState extends State<_SearchTextField> {
   final TextEditingController controller = TextEditingController();
   final FocusNode focusNode = FocusNode();
 
+  @override
+  void initState() {
+    super.initState();
+    if (widget.ensureFocus) {
+      Future.delayed(const Duration(milliseconds: 200), () {
+        if (!mounted || focusNode.hasFocus) return;
+        focusNode.requestFocus();
+      });
+    }
+  }
+
   @override
   void dispose() {
     controller.dispose();

diff --git a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart b/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart
@@ -153,6 +153,7 @@ class _FlowyIconEmojiPickerState extends State<FlowyIconEmojiPicker>
 
   Widget _buildEmojiPicker() {
     return FlowyEmojiPicker(
+      ensureFocus: true,
       emojiPerLine: _getEmojiPerLine(context),
       onEmojiSelected: (_, emoji) => widget.onSelectedEmoji?.call(
         EmojiIconData.emoji(emoji),