feat(mobile): Focus search on doubletap nav button (#6048)

* feat(mobile): Focus search on doubletap nav button * Update mobile/lib/modules/search/ui/immich_search_bar.dart Co-authored-by: shenlong <139912620+shenlong-tanwen@users.noreply.github.com> * Move search notifier inside search bar file And fix naming to better represent type. * Remove onSearchFocusRequest and call focusSearch directly * Fix compilation error after file autosave --------- Co-authored-by: Justin van der Krieken <justin@vdkrieken.com> Co-authored-by: shenlong <139912620+shenlong-tanwen@users.noreply.github.com>
immich-app · Jan 15, 2024 · aa8c54e · aa8c54e
1 parent d096cac
commit aa8c54e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/mobile/lib/modules/search/ui/immich_search_bar.dart b/mobile/lib/modules/search/ui/immich_search_bar.dart
@@ -21,6 +21,25 @@ class ImmichSearchBar extends HookConsumerWidget
     final searchTermController = useTextEditingController(text: "");
     final isSearchEnabled = ref.watch(searchPageStateProvider).isSearchEnabled;
 
+    focusSearch() {
+      searchTermController.clear();
+      ref.watch(searchPageStateProvider.notifier).getSuggestedSearchTerms();
+      ref.watch(searchPageStateProvider.notifier).enableSearch();
+      ref.watch(searchPageStateProvider.notifier).setSearchTerm("");
+
+      searchFocusNode.requestFocus();
+    }
+
+    useEffect(
+      () {
+        searchFocusNotifier.addListener(focusSearch);
+        return () {
+          searchFocusNotifier.removeListener(focusSearch);
+        };
+      },
+      [],
+    );
+
     return AppBar(
       automaticallyImplyLeading: false,
       leading: isSearchEnabled
@@ -40,14 +59,7 @@ class ImmichSearchBar extends HookConsumerWidget
         controller: searchTermController,
         focusNode: searchFocusNode,
         autofocus: false,
-        onTap: () {
-          searchTermController.clear();
-          ref.watch(searchPageStateProvider.notifier).getSuggestedSearchTerms();
-          ref.watch(searchPageStateProvider.notifier).enableSearch();
-          ref.watch(searchPageStateProvider.notifier).setSearchTerm("");
-
-          searchFocusNode.requestFocus();
-        },
+        onTap: focusSearch,
         onSubmitted: (searchTerm) {
           onSubmitted(searchTerm);
           searchTermController.clear();
@@ -75,3 +87,13 @@ class ImmichSearchBar extends HookConsumerWidget
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight);
 }
+
+// Used to focus search from outside this widget.
+// For example when double pressing the search nav icon.
+final searchFocusNotifier = SearchFocusNotifier();
+
+class SearchFocusNotifier with ChangeNotifier {
+  void requestFocus() {
+    notifyListeners();
+  }
+}
diff --git a/mobile/lib/shared/views/tab_controller_page.dart b/mobile/lib/shared/views/tab_controller_page.dart
@@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/scroll_notifier.provider.dart';
 import 'package:immich_mobile/modules/home/providers/multiselect.provider.dart';
+import 'package:immich_mobile/modules/search/ui/immich_search_bar.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/shared/providers/tab.provider.dart';
@@ -51,6 +52,11 @@ class TabControllerPage extends HookConsumerWidget {
             // Scroll to top
             scrollToTopNotifierProvider.scrollToTop();
           }
+          if (tabsRouter.activeIndex == 1 && index == 1) {
+            // Focus search
+            searchFocusNotifier.requestFocus();
+          }
+
           HapticFeedback.selectionClick();
           tabsRouter.setActiveIndex(index);
           ref.read(tabProvider.notifier).state = TabEnum.values[index];
@@ -104,6 +110,10 @@ class TabControllerPage extends HookConsumerWidget {
             // Scroll to top
             scrollToTopNotifierProvider.scrollToTop();
           }
+          if (tabsRouter.activeIndex == 1 && index == 1) {
+            // Focus search
+            searchFocusNotifier.requestFocus();
+          }
           HapticFeedback.selectionClick();
           tabsRouter.setActiveIndex(index);
           ref.read(tabProvider.notifier).state = TabEnum.values[index];