Merge pull request #292 from poppingmoon/search-page-focus-node

検索画面でタブ変更時にフォーカスを切り替える
shiosyakeyakini-info · Sep 9, 2023 · ea35796 · ea35796
2 parents aa39a8a + 87ab88d
commit ea35796
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 22 deletions.
diff --git a/lib/view/search_page/note_search.dart b/lib/view/search_page/note_search.dart
@@ -13,8 +13,13 @@ import 'package:misskey_dart/misskey_dart.dart';
 
 class NoteSearch extends ConsumerStatefulWidget {
   final String? initialSearchText;
+  final FocusNode? focusNode;
 
-  const NoteSearch({super.key, required this.initialSearchText});
+  const NoteSearch({
+    super.key,
+    required this.initialSearchText,
+    this.focusNode,
+  });
 
   @override
   ConsumerState<ConsumerStatefulWidget> createState() => NoteSearchState();
@@ -58,6 +63,7 @@ class NoteSearchState extends ConsumerState<NoteSearch> {
                     decoration: const InputDecoration(
                       prefixIcon: Icon(Icons.search),
                     ),
+                    focusNode: widget.focusNode,
                     autofocus: true,
                     textInputAction: TextInputAction.done,
                     onSubmitted: (value) {

diff --git a/lib/view/search_page/search_page.dart b/lib/view/search_page/search_page.dart
@@ -31,34 +31,76 @@ class SearchPage extends ConsumerStatefulWidget {
 }
 
 class NoteSearchPageState extends ConsumerState<SearchPage> {
+  late final List<FocusNode> focusNodes;
+  int tabIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    focusNodes = [FocusNode(), FocusNode()];
+  }
+
+  @override
+  void dispose() {
+    for (final focusNode in focusNodes) {
+      focusNode.dispose();
+    }
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return DefaultTabController(
       length: 2,
       child: AccountScope(
-          account: widget.account,
-          child: Scaffold(
-              appBar: AppBar(
-                title: const Text("検索"),
-                bottom: const TabBar(
-                  tabs: [
-                    Tab(text: "ノート"),
-                    Tab(text: "ユーザー"),
-                  ],
-                ),
-              ),
-              body: TabBarView(
+        account: widget.account,
+        child: Scaffold(
+          appBar: AppBar(
+            title: const Text("検索"),
+            bottom: const TabBar(
+              tabs: [
+                Tab(text: "ノート"),
+                Tab(text: "ユーザー"),
+              ],
+            ),
+          ),
+          body: Builder(
+            builder: (context) {
+              final tabController = DefaultTabController.of(context);
+              tabController.addListener(() {
+                if (tabController.index != tabIndex) {
+                  focusNodes[tabController.index].requestFocus();
+                  setState(() {
+                    tabIndex = tabController.index;
+                  });
+                }
+              });
+              return TabBarView(
+                controller: tabController,
                 children: [
-                  NoteSearch(initialSearchText: widget.initialSearchText),
+                  NoteSearch(
+                    initialSearchText: widget.initialSearchText,
+                    focusNode: focusNodes[0],
+                  ),
                   Padding(
-                      padding:
-                          const EdgeInsets.only(left: 10, right: 10, top: 10),
-                      child: UserSelectContent(
-                        onSelected: (item) => context.pushRoute(UserRoute(
-                            userId: item.id, account: widget.account)),
-                      ))
+                    padding:
+                        const EdgeInsets.only(left: 10, right: 10, top: 10),
+                    child: UserSelectContent(
+                      focusNode: focusNodes[1],
+                      onSelected: (item) => context.pushRoute(
+                        UserRoute(
+                          userId: item.id,
+                          account: widget.account,
+                        ),
+                      ),
+                    ),
+                  ),
                 ],
-              ))),
+              );
+            },
+          ),
+        ),
+      ),
     );
   }
 }
diff --git a/lib/view/user_select_dialog.dart b/lib/view/user_select_dialog.dart
@@ -31,7 +31,13 @@ class UserSelectDialog extends StatelessWidget {
 
 class UserSelectContent extends ConsumerStatefulWidget {
   final void Function(User) onSelected;
-  const UserSelectContent({super.key, required this.onSelected});
+  final FocusNode? focusNode;
+
+  const UserSelectContent({
+    super.key,
+    required this.onSelected,
+    this.focusNode,
+  });
 
   @override
   ConsumerState<ConsumerStatefulWidget> createState() =>
@@ -61,6 +67,7 @@ class UserSelectContentState extends ConsumerState<UserSelectContent> {
       children: [
         TextField(
           controller: queryController,
+          focusNode: widget.focusNode,
           autofocus: true,
           decoration: const InputDecoration(prefixIcon: Icon(Icons.search)),
           onSubmitted: (value) {