Focus on searchbar when HighlightsSearchScreen is launched

Author: amjiao

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsScreenSearchFilterBar.kt

@@ -14,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.cornellappdev.score.components.ScorePreview
@@ -25,6 +26,7 @@ import com.cornellappdev.score.util.sportList
 fun HighlightsScreenSearchFilterBar(
     sportList: List<Sport>,
     isActive: Boolean,
+    focusRequester: FocusRequester? = null
 ) {
     Column(modifier = Modifier.fillMaxWidth()) {
         Row(
@@ -35,7 +37,12 @@ fun HighlightsScreenSearchFilterBar(
             horizontalArrangement = Arrangement.spacedBy(12.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            HighlightsSearchBar({}, isActive, Modifier.weight(1f))
+            HighlightsSearchBar(
+                onSearchClick = {},
+                isActive = isActive,
+                focusRequester = focusRequester,
+                modifier = Modifier.weight(1f)
+            )
             if (isActive) {
                 Text("Cancel", style = bodyMedium)
             }
@@ -49,14 +56,14 @@ fun HighlightsScreenSearchFilterBar(
 @Composable
 private fun HighlightsScreenSearchFilterBarActivePreview() {
     ScorePreview {
-        HighlightsScreenSearchFilterBar(sportList, true)
+        HighlightsScreenSearchFilterBar(sportList, true, focusRequester = FocusRequester())
     }
 }
 
 @Preview
 @Composable
 private fun HighlightsScreenSearchFilterBarInactivePreview() {
     ScorePreview {
-        HighlightsScreenSearchFilterBar(sportList, false)
+        HighlightsScreenSearchFilterBar(sportList, false, focusRequester = FocusRequester())
     }
 }

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsSearchBar.kt

@@ -22,6 +22,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 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.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.VisualTransformation
@@ -35,6 +37,7 @@ import com.cornellappdev.score.theme.Style.bodyNormal
 fun HighlightsSearchBar(
     onSearchClick: () -> Unit,
     isActive: Boolean,
+    focusRequester: FocusRequester? = null,
     modifier: Modifier = Modifier
 ) {
     val interactionSource = remember { MutableInteractionSource() }
@@ -76,6 +79,9 @@ fun HighlightsSearchBar(
                 visualTransformation = VisualTransformation.None,
                 interactionSource = interactionSource,
                 modifier = Modifier
+                    .then(
+                        focusRequester?.let { Modifier.focusRequester(it) } ?: Modifier
+                    )
                     .fillMaxWidth()
                     .background(Color.Transparent)
             )

app/src/main/java/com/cornellappdev/score/screen/HighlightsSearchScreen.kt

@@ -9,7 +9,10 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -39,13 +42,20 @@ fun HighlightsSearchScreen(
             .background(color = Color.White)
             .padding(top = 24.dp)
     ) {
+        val focusRequester = remember { FocusRequester() }
+
+        LaunchedEffect(Unit) {
+            focusRequester.requestFocus()
+        }
+
         Row(modifier = Modifier.padding(horizontal = 24.dp)) {
             Text(text = header, style = heading2)
         }
         Spacer(modifier = Modifier.height(16.dp))
         HighlightsScreenSearchFilterBar(
             sportList,
-            true
+            true,
+            focusRequester = focusRequester
         ) //need viewmodel to handle comms between composables
         Spacer(modifier = Modifier.height(24.dp))
         Column(

gradle/libs.versions.toml

@@ -17,6 +17,8 @@ media3CommonKtx = "1.5.1"
 # See https://stackoverflow.com/a/79126321
 material3 = "1.4.0-alpha11"
 material3Version = "1.3.2"
+runtime = "1.9.4"
+ui = "1.9.4"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -33,6 +35,8 @@ androidx-runtime-android = { group = "androidx.compose.runtime", name = "runtime
 apollo-runtime = { module = "com.apollographql.apollo:apollo-runtime" }
 androidx-media3-common-ktx = { group = "androidx.media3", name = "media3-common-ktx", version.ref = "media3CommonKtx" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3Version" }
+androidx-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "runtime" }
+androidx-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "ui" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }