From 06bbc06fff3014a96a8b10792227216ae895c8cb Mon Sep 17 00:00:00 2001
From: Alex Wallen <wallenstephen@outlook.com>
Date: Tue, 18 Jul 2023 03:25:25 -0700
Subject: [PATCH] fix: focus is clickable if text field is being edited (#3020)

---
 .../appearance_settings_test.dart             | 45 +++++++++++++++++++
 .../widgets/settings_appearance_view.dart     |  9 ++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/appflowy_flutter/integration_test/appearance_settings_test.dart

diff --git a/frontend/appflowy_flutter/integration_test/appearance_settings_test.dart b/frontend/appflowy_flutter/integration_test/appearance_settings_test.dart
new file mode 100644
index 0000000000..4789b4e543
--- /dev/null
+++ b/frontend/appflowy_flutter/integration_test/appearance_settings_test.dart
@@ -0,0 +1,45 @@
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance_view.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('appearance settings tests', () {
+    testWidgets('after editing text field, button should be able to be clicked',
+        (tester) async {
+      await tester.initializeAppFlowy();
+
+      await tester.tapGoButton();
+      tester.expectToSeeHomePage();
+      await tester.openSettings();
+
+      await tester.openSettingsPage(SettingsPage.appearance);
+
+      final dropDown = find.byKey(ThemeFontFamilySetting.popoverKey);
+      await tester.tap(dropDown);
+      await tester.pumpAndSettle();
+
+      final textField = find.byKey(ThemeFontFamilySetting.textFieldKey);
+      await tester.tap(textField);
+      await tester.pumpAndSettle();
+
+      await tester.enterText(textField, 'Abel');
+      await tester.pumpAndSettle();
+      final fontFamilyButton = find.byKey(const Key('Abel'));
+
+      expect(fontFamilyButton, findsOneWidget);
+      await tester.tap(fontFamilyButton);
+      await tester.pumpAndSettle();
+
+      // just switch the page and verify that the font family was set after that
+      await tester.openSettingsPage(SettingsPage.files);
+      await tester.openSettingsPage(SettingsPage.appearance);
+
+      expect(find.textContaining('Abel'), findsOneWidget);
+    });
+  });
+}
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
index abd722f057..d10ce90361 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@@ -286,6 +286,8 @@ class ThemeFontFamilySetting extends StatefulWidget {
   });
 
   final String currentFontFamily;
+  static Key textFieldKey = const Key('FontFamilyTextField');
+  static Key popoverKey = const Key('FontFamilyPopover');
 
   @override
   State<ThemeFontFamilySetting> createState() => _ThemeFontFamilySettingState();
@@ -298,6 +300,7 @@ class _ThemeFontFamilySettingState extends State<ThemeFontFamilySetting> {
   @override
   Widget build(BuildContext context) {
     return ThemeSettingDropDown(
+      popoverKey: ThemeFontFamilySetting.popoverKey,
       label: LocaleKeys.settings_appearance_fontFamily_label.tr(),
       currentValue: parseFontFamilyName(widget.currentFontFamily),
       onClose: () {
@@ -310,6 +313,7 @@ class _ThemeFontFamilySettingState extends State<ThemeFontFamilySetting> {
             padding: const EdgeInsets.only(right: 8),
             sliver: SliverToBoxAdapter(
               child: FlowyTextField(
+                key: ThemeFontFamilySetting.textFieldKey,
                 hintText: LocaleKeys.settings_appearance_fontFamily_search.tr(),
                 autoFocus: false,
                 debounceDuration: const Duration(milliseconds: 300),
@@ -364,6 +368,8 @@ class _ThemeFontFamilySettingState extends State<ThemeFontFamilySetting> {
       key: UniqueKey(),
       height: 32,
       child: FlowyButton(
+        key: Key(buttonFontFamily),
+        onHover: (_) => FocusScope.of(context).unfocus(),
         text: FlowyText.medium(
           parseFontFamilyName(style.fontFamily!),
           fontFamily: style.fontFamily!,
@@ -394,11 +400,13 @@ class ThemeSettingDropDown extends StatefulWidget {
     required this.label,
     required this.currentValue,
     required this.popupBuilder,
+    this.popoverKey,
     this.onClose,
   });
 
   final String label;
   final String currentValue;
+  final Key? popoverKey;
   final Widget Function(BuildContext) popupBuilder;
   final void Function()? onClose;
 
@@ -418,6 +426,7 @@ class _ThemeSettingDropDownState extends State<ThemeSettingDropDown> {
           ),
         ),
         AppFlowyPopover(
+          key: widget.popoverKey,
           direction: PopoverDirection.bottomWithRightAligned,
           popupBuilder: widget.popupBuilder,
           constraints: const BoxConstraints(