hot-fix:TW-1812-remove x when searchbar is empty (#1910)

* hot-fix:TW-1812-remove x when searchbar is empty * fixup! hot-fix:TW-1812-remove x when searchbar is empty
linagora · Jul 10, 2024 · 174926b · 174926b
1 parent 4fb3d41
commit 174926b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 52 deletions.
diff --git a/lib/pages/contacts_tab/contacts_appbar.dart b/lib/pages/contacts_tab/contacts_appbar.dart
@@ -1,6 +1,5 @@
 import 'package:fluffychat/pages/contacts_tab/contacts_appbar_style.dart';
-import 'package:fluffychat/pages/dialer/pip/dismiss_keyboard.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
+import 'package:fluffychat/pages/search/search_text_field.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:linagora_design_flutter/linagora_design_flutter.dart';
@@ -49,46 +48,11 @@ class ContactsAppBar extends StatelessWidget {
                 child: Row(
                   children: [
                     Expanded(
-                      child: TextField(
-                        onTapOutside: (event) {
-                          dismissKeyboard(context);
-                        },
+                      child: SearchTextField(
+                        textEditingController: textEditingController,
+                        hintText: L10n.of(context)!.searchForContacts,
+                        autofocus: false,
                         focusNode: searchFocusNode,
-                        controller: textEditingController,
-                        textInputAction: TextInputAction.search,
-                        decoration: InputDecoration(
-                          contentPadding: ContactsAppbarStyle.contentPadding,
-                          filled: true,
-                          fillColor: Theme.of(context).colorScheme.surface,
-                          border: OutlineInputBorder(
-                            borderRadius: BorderRadius.circular(
-                              ContactsAppbarStyle.textFieldBorderRadius,
-                            ),
-                            borderSide: BorderSide.none,
-                          ),
-                          hintText: L10n.of(context)!.searchForContacts,
-                          hintStyle: Theme.of(context)
-                              .textTheme
-                              .titleMedium
-                              ?.copyWith(
-                                color: LinagoraRefColors.material().neutral[60],
-                              ),
-                          prefixIcon: Icon(
-                            Icons.search_outlined,
-                            size: ContactsAppbarStyle.iconSize,
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
-                          suffixIcon: isSearchMode
-                              ? TwakeIconButton(
-                                  tooltip: L10n.of(context)!.clear,
-                                  icon: Icons.close,
-                                  onTap: clearSearchBar,
-                                  size: ContactsAppbarStyle.iconSize,
-                                  iconColor:
-                                      Theme.of(context).colorScheme.onSurface,
-                                )
-                              : null,
-                        ),
                       ),
                     ),
                   ],

diff --git a/lib/pages/search/search_text_field.dart b/lib/pages/search/search_text_field.dart
@@ -6,10 +6,16 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 
 class SearchTextField extends StatelessWidget {
   final TextEditingController textEditingController;
+  final bool autofocus;
+  final String? hintText;
+  final FocusNode? focusNode;
 
   const SearchTextField({
     super.key,
     required this.textEditingController,
+    this.autofocus = true,
+    this.hintText,
+    this.focusNode,
   });
 
   @override
@@ -23,7 +29,8 @@ class SearchTextField extends StatelessWidget {
         controller: textEditingController,
         textInputAction: TextInputAction.search,
         enabled: true,
-        autofocus: true,
+        focusNode: focusNode,
+        autofocus: autofocus,
         decoration: InputDecoration(
           filled: true,
           contentPadding: SearchViewStyle.contentPaddingAppBar,
@@ -32,7 +39,7 @@ class SearchTextField extends StatelessWidget {
             borderSide: BorderSide.none,
             borderRadius: SearchViewStyle.borderRadiusTextField,
           ),
-          hintText: L10n.of(context)!.search,
+          hintText: hintText ?? L10n.of(context)!.search,
           floatingLabelBehavior: FloatingLabelBehavior.never,
           prefixIcon: Icon(
             Icons.search_outlined,

diff --git a/lib/widgets/app_bars/searchable_app_bar.dart b/lib/widgets/app_bars/searchable_app_bar.dart
@@ -111,13 +111,21 @@ class SearchableAppBar extends StatelessWidget {
                     valueListenable: searchModeNotifier,
                     builder: (context, isSearchModeEnabled, child) {
                       if (isSearchModeEnabled) {
-                        return TwakeIconButton(
-                          onTap: closeSearchBar,
-                          tooltip: L10n.of(context)!.close,
-                          icon: Icons.close,
-                          paddingAll:
-                              SearchableAppBarStyle.closeButtonPaddingAll,
-                          margin: SearchableAppBarStyle.closeButtonMargin,
+                        return ValueListenableBuilder(
+                          valueListenable: textEditingController,
+                          builder: (context, value, child) {
+                            return value.text.isNotEmpty
+                                ? child!
+                                : const SizedBox.shrink();
+                          },
+                          child: TwakeIconButton(
+                            onTap: closeSearchBar,
+                            tooltip: L10n.of(context)!.close,
+                            icon: Icons.close,
+                            paddingAll:
+                                SearchableAppBarStyle.closeButtonPaddingAll,
+                            margin: SearchableAppBarStyle.closeButtonMargin,
+                          ),
                         );
                       }
                       return TwakeIconButton(

diff --git a/test/widget/app_bars/searchable_app_bar_test.dart b/test/widget/app_bars/searchable_app_bar_test.dart
@@ -10,6 +10,7 @@ final getIt = GetIt.instance;
 
 void main() {
   final searchModeNotifier = ValueNotifier(false);
+  final textEditingController = TextEditingController();
 
   Widget makeTestableAppBar({
     bool isFullScreen = true,
@@ -33,7 +34,7 @@ void main() {
                 title: "Title",
                 hintText: "Hint",
                 focusNode: FocusNode(),
-                textEditingController: TextEditingController(),
+                textEditingController: textEditingController,
                 openSearchBar: () => searchModeNotifier.value = true,
                 closeSearchBar: () => searchModeNotifier.value = false,
                 isFullScreen: isFullScreen,
@@ -106,13 +107,32 @@ void main() {
       expect(find.byIcon(Icons.close), findsNothing);
     });
 
-    testWidgets("Still one textfield when clicking on title",
+    testWidgets(
+        "Still one textfield when clicking on title (searchMode enabled and search text is empty)",
+        (widgetTester) async {
+      await widgetTester.pumpWidget(
+        makeTestableAppBar(),
+      );
+
+      await widgetTester.tap(find.byIcon(Icons.search));
+      await widgetTester.pump();
+
+      expect(find.text("Title"), findsNothing);
+      expect(find.text("Hint"), findsOneWidget);
+      expect(find.byType(TextField), findsOneWidget);
+      expect(find.byIcon(Icons.search_outlined), findsNothing);
+      expect(find.byIcon(Icons.close), findsNothing);
+    });
+
+    testWidgets(
+        "Still one textfield when clicking on title (searchMode enabled and search text is not empty)",
         (widgetTester) async {
       await widgetTester.pumpWidget(
         makeTestableAppBar(),
       );
 
       await widgetTester.tap(find.byIcon(Icons.search));
+      textEditingController.text = "Search text";
       await widgetTester.pump();
 
       expect(find.text("Title"), findsNothing);