From 3d3f69a085815a7c8a069ee2c8af082526e60d88 Mon Sep 17 00:00:00 2001
From: Gonzalo Gran Crespo <gongracr@gmail.com>
Date: Fri, 20 Oct 2023 12:55:15 +0200
Subject: [PATCH] fix: fixed issue not activating search on long click in
 search bar

---
 .../common/topappbar/search/SearchTopBar.kt   | 80 +++++++++++--------
 1 file changed, 47 insertions(+), 33 deletions(-)

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt b/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt
index afb082113eb..6c72e05c290 100644
--- a/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt
+++ b/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchTopBar.kt
@@ -24,13 +24,15 @@ package com.wire.android.ui.common.topappbar.search
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalTextStyle
@@ -39,6 +41,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -49,6 +54,7 @@ import com.wire.android.R
 import com.wire.android.ui.common.SearchBarInput
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.wireColorScheme
+import com.wire.android.ui.theme.wireDimensions
 
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
@@ -72,51 +78,59 @@ fun SearchTopBar(
         }
 
         val focusManager = LocalFocusManager.current
+        val focusRequester = remember { FocusRequester() }
 
         LaunchedEffect(isSearchActive) {
             if (!isSearchActive) {
                 focusManager.clearFocus()
                 onSearchQueryChanged(TextFieldValue(""))
+            } else {
+                focusRequester.requestFocus()
             }
         }
 
-        SearchBarInput(
-            placeholderText = searchBarHint,
-            text = searchQuery,
-            onTextTyped = onSearchQueryChanged,
-            leadingIcon = {
-                AnimatedContent(!isSearchActive) { isVisible ->
-                    IconButton(onClick = {
-                        if (!isVisible) {
-                            onCloseSearchClicked()
+        Box {
+            SearchBarInput(
+                placeholderText = searchBarHint,
+                text = searchQuery,
+                onTextTyped = onSearchQueryChanged,
+                leadingIcon = {
+                    AnimatedContent(!isSearchActive, label = "") { isVisible ->
+                        IconButton(onClick = {
+                            if (!isVisible) {
+                                onCloseSearchClicked()
+                            }
+                        }) {
+                            Icon(
+                                painter = painterResource(
+                                    id = if (isVisible) R.drawable.ic_search
+                                    else R.drawable.ic_arrow_left
+                                ),
+                                contentDescription = stringResource(R.string.content_description_conversation_search_icon),
+                                tint = MaterialTheme.wireColorScheme.onBackground
+                            )
                         }
-                    }) {
-                        Icon(
-                            painter = painterResource(
-                                id = if (isVisible) R.drawable.ic_search
-                                else R.drawable.ic_arrow_left
-                            ),
-                            contentDescription = stringResource(R.string.content_description_conversation_search_icon),
-                            tint = MaterialTheme.wireColorScheme.onBackground
-                        )
                     }
-                }
-            },
-            placeholderTextStyle = textStyleAlignment(isTopBarVisible = !isSearchActive),
-            textStyle = textStyleAlignment(isTopBarVisible = !isSearchActive),
-            interactionSource = interactionSource,
-            modifier = Modifier.padding(dimensions().spacing8x)
-        )
-
-        if (interactionSource.collectIsPressedAsState().value) {
-            // we want to propagate the click on the input of the search
-            // only the first time the user clicks on the input
-            // that is when the search is not active
+                },
+                placeholderTextStyle = textStyleAlignment(isTopBarVisible = !isSearchActive),
+                textStyle = textStyleAlignment(isTopBarVisible = !isSearchActive),
+                interactionSource = interactionSource,
+                modifier = Modifier
+                    .padding(dimensions().spacing8x)
+                    .focusRequester(focusRequester)
+            )
+            // We added an invisible clickable box only present when the search is not active.
+            // That way we can still make the whole top bar clickable and intercept and discard the long press gestures.
             if (!isSearchActive) {
-                onInputClicked()
+                Box(
+                    modifier = Modifier
+                        .matchParentSize()
+                        .padding(dimensions().spacing8x)
+                        .clip(RoundedCornerShape(MaterialTheme.wireDimensions.textFieldCornerSize))
+                        .clickable(onClick = onInputClicked)
+                )
             }
         }
-
         bottomContent()
     }
 }