Fix focus issues in InputAge component

dhis2 · Oct 20, 2023 · 2f00df8 · 2f00df8
1 parent e3eec73
commit 2f00df8
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/...gnsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputAge.kt b/...gnsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputAge.kt
@@ -9,8 +9,16 @@ import androidx.compose.material.icons.filled.Event
 import androidx.compose.material.icons.outlined.Cancel
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -49,6 +57,7 @@ fun InputAge(
     supportingText: List<SupportingTextData>? = null,
     isRequired: Boolean = false,
     imeAction: ImeAction = ImeAction.Next,
+    onNextClicked: (() -> Unit)? = null,
     dateOfBirthLabel: String = provideStringResource("date_birth"),
     orLabel: String = provideStringResource("or"),
     ageLabel: String = provideStringResource("age"),
@@ -89,17 +98,35 @@ fun InputAge(
         null
     }
 
+    val focusManager = LocalFocusManager.current
+    val focusRequester = remember { FocusRequester() }
+
+    var previousInputType by remember { mutableStateOf(inputType) }
+    LaunchedEffect(inputType) {
+        when {
+            previousInputType == None && (inputType is DateOfBirth || inputType is Age) -> {
+                focusRequester.requestFocus()
+            }
+            else -> {
+                // no-op
+            }
+        }
+
+        if (previousInputType != inputType) {
+            previousInputType = inputType
+        }
+    }
+
     InputShell(
-        modifier = modifier.testTag("INPUT_AGE"),
+        modifier = modifier.testTag("INPUT_AGE").focusRequester(focusRequester),
         title = title,
         state = state,
         isRequiredField = isRequired,
         inputField = {
             when (inputType) {
                 None -> {
                     TextButtonSelector(
-                        modifier = Modifier.focusable(true)
-                            .testTag("INPUT_AGE_MODE_SELECTOR"),
+                        modifier = Modifier.testTag("INPUT_AGE_MODE_SELECTOR"),
                         firstOptionText = dateOfBirthLabel,
                         onClickFirstOption = {
                             onValueChanged.invoke(DateOfBirth.EMPTY)
@@ -140,6 +167,13 @@ fun InputAge(
                         enabled = state != InputShellState.DISABLED,
                         state = state,
                         keyboardOptions = KeyboardOptions(imeAction = imeAction, keyboardType = KeyboardType.Number),
+                        onNextClicked = {
+                            if (onNextClicked != null) {
+                                onNextClicked()
+                            } else {
+                                focusManager.moveFocus(FocusDirection.Down)
+                            }
+                        },
                     )
                 }
             }
@@ -155,6 +189,7 @@ fun InputAge(
                         )
                     },
                     onClick = {
+                        focusRequester.requestFocus()
                         onValueChanged.invoke(None)
                     },
                 )