Change focus order in select location screen

mullvad · Aug 10, 2023 · 004001b · 004001b
1 parent d60839a
commit 004001b
Showing 1 changed file with 50 additions and 33 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -18,9 +18,14 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -55,6 +60,7 @@ fun PreviewSelectLocationScreen() {
     AppTheme { SelectLocationScreen(uiState = state, uiCloseAction = MutableSharedFlow()) }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun SelectLocationScreen(
     uiState: SelectLocationUiState,
@@ -64,46 +70,57 @@ fun SelectLocationScreen(
     onBackClick: () -> Unit = {}
 ) {
     LaunchedEffect(Unit) { uiCloseAction.collect { onBackClick() } }
+    val (backFocus, listFocus, searchBarFocus) = remember { FocusRequester.createRefs() }
     Column(
         modifier =
-            Modifier.background(MaterialTheme.colorScheme.background).fillMaxWidth().fillMaxHeight()
+        Modifier.background(MaterialTheme.colorScheme.background).fillMaxWidth().fillMaxHeight()
     ) {
         Row(
             modifier =
-                Modifier.padding(
-                        horizontal = Dimens.selectLocationTitlePadding,
-                        vertical = Dimens.selectLocationTitlePadding
-                    )
-                    .fillMaxWidth()
+            Modifier.padding(
+                horizontal = Dimens.selectLocationTitlePadding,
+                vertical = Dimens.selectLocationTitlePadding
+            )
+                .fillMaxWidth()
         ) {
             Image(
                 painter = painterResource(id = R.drawable.icon_back),
                 contentDescription = null,
                 modifier =
-                    Modifier.size(Dimens.titleIconSize).rotate(270f).clickable { onBackClick() }
+                Modifier.focusRequester(backFocus)
+                    .focusProperties { next = listFocus }
+                    .focusProperties {
+                        down = listFocus
+                        right = searchBarFocus
+                    }
+                    .size(Dimens.titleIconSize)
+                    .rotate(270f)
+                    .clickable { onBackClick() }
             )
             Text(
                 text = stringResource(id = R.string.select_location),
                 modifier =
-                    Modifier.align(Alignment.CenterVertically)
-                        .weight(weight = 1f)
-                        .padding(end = Dimens.titleIconSize),
+                Modifier.align(Alignment.CenterVertically)
+                    .weight(weight = 1f)
+                    .padding(end = Dimens.titleIconSize),
                 textAlign = TextAlign.Center,
                 style = MaterialTheme.typography.labelLarge,
                 color = MaterialTheme.colorScheme.onPrimary
             )
         }
         SearchTextField(
             modifier =
-                Modifier.fillMaxWidth()
-                    .height(Dimens.searchFieldHeight)
-                    .padding(horizontal = Dimens.searchFieldHorizontalPadding)
+            Modifier.fillMaxWidth()
+                .focusRequester(searchBarFocus)
+                .focusProperties { next = backFocus }
+                .height(Dimens.searchFieldHeight)
+                .padding(horizontal = Dimens.searchFieldHorizontalPadding)
         ) { searchString ->
             onSearchTermInput.invoke(searchString)
         }
         Spacer(modifier = Modifier.height(height = Dimens.verticalSpace))
         LazyColumn(
-            modifier = Modifier.fillMaxWidth().fillMaxHeight(),
+            modifier = Modifier.focusRequester(listFocus).fillMaxWidth().fillMaxHeight(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             when (uiState) {
@@ -112,11 +129,11 @@ fun SelectLocationScreen(
                         CircularProgressIndicator(
                             color = MaterialTheme.colorScheme.onBackground,
                             modifier =
-                                Modifier.size(
-                                        width = Dimens.progressIndicatorSize,
-                                        height = Dimens.progressIndicatorSize
-                                    )
-                                    .testTag(CIRCULAR_PROGRESS_INDICATOR)
+                            Modifier.size(
+                                width = Dimens.progressIndicatorSize,
+                                height = Dimens.progressIndicatorSize
+                            )
+                                .testTag(CIRCULAR_PROGRESS_INDICATOR)
                         )
                     }
                 }
@@ -139,24 +156,24 @@ fun SelectLocationScreen(
                     item(contentType = ContentType.EMPTY_TEXT) {
                         val firstRow =
                             HtmlCompat.fromHtml(
-                                    textResource(
-                                        id = R.string.select_location_empty_text_first_row,
-                                        uiState.searchTerm
-                                    ),
-                                    HtmlCompat.FROM_HTML_MODE_COMPACT
-                                )
+                                textResource(
+                                    id = R.string.select_location_empty_text_first_row,
+                                    uiState.searchTerm
+                                ),
+                                HtmlCompat.FROM_HTML_MODE_COMPACT
+                            )
                                 .toAnnotatedString(boldFontWeight = FontWeight.ExtraBold)
                         Text(
                             text =
-                                buildAnnotatedString {
-                                    append(firstRow)
-                                    appendLine()
-                                    append(
-                                        textResource(
-                                            id = R.string.select_location_empty_text_second_row
-                                        )
+                            buildAnnotatedString {
+                                append(firstRow)
+                                appendLine()
+                                append(
+                                    textResource(
+                                        id = R.string.select_location_empty_text_second_row
                                     )
-                                },
+                                )
+                            },
                             style = MaterialTheme.typography.labelMedium,
                             textAlign = TextAlign.Center
                         )