fix: [ANDROAPP-6124] change phone number input keyboard to phone (#271)

dhis2 · Jul 5, 2024 · 2c24ab2 · 2c24ab2
1 parent 5d10a57
commit 2c24ab2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/.../src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputPhoneNumber.kt b/.../src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputPhoneNumber.kt
@@ -20,6 +20,7 @@ import org.hisp.dhis.mobile.ui.designsystem.component.internal.RegExValidations
  * @param onCallActionClicked: callback to when call phone number button is clicked.
  * @param modifier: allows a modifier to be passed externally.
  * @param maxLength: number of characters/digits that can be entered.
+ * @param minLength: number of characters/digits that needs be entered to enable phone button.
  * @param state: Manages the InputShell state.
  * @param inputStyle: manages the InputShell style.
  * @param legendData: manages the legendComponent.
@@ -42,6 +43,7 @@ fun InputPhoneNumber(
     onCallActionClicked: () -> Unit,
     modifier: Modifier = Modifier,
     maxLength: Int = 12,
+    minLength: Int = 4,
     state: InputShellState,
     inputStyle: InputStyle = InputStyle.DataInputStyle(),
     legendData: LegendData? = null,
@@ -56,7 +58,7 @@ fun InputPhoneNumber(
     supportingText: List<SupportingTextData>? = emptyList(),
     allowedCharacters: RegExValidations = RegExValidations.PHONE_NUMBER,
 ) {
-    val hasMinimumPhoneNumberInput = inputTextFieldValue?.text.orEmpty().length > 2
+    val hasMinimumPhoneNumberInput = inputTextFieldValue?.text.orEmpty().length >= minLength
     BasicTextInput(
         title = title,
         state = state,
@@ -75,7 +77,7 @@ fun InputPhoneNumber(
         },
         keyboardOptions = KeyboardOptions(
             imeAction = imeAction,
-            keyboardType = KeyboardType.Number,
+            keyboardType = KeyboardType.Phone,
         ),
         allowedCharacters = allowedCharacters.regex,
         modifier = modifier,

diff --git a/...desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputPhoneNumberTest.kt b/...desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputPhoneNumberTest.kt
@@ -10,6 +10,7 @@ import androidx.compose.ui.test.assertTextEquals
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithTag
 import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.performTextClearance
 import androidx.compose.ui.test.performTextInput
 import androidx.compose.ui.text.input.TextFieldValue
 import org.junit.Rule
@@ -47,14 +48,38 @@ class InputPhoneNumberTest {
     }
 
     @Test
-    fun shouldEnableCallActionButtonAfterInputTextReachesCharacterLimit() {
+    fun shouldAllowAddAndParenthesisInput() {
         rule.setContent {
             var inputValue by remember { mutableStateOf(TextFieldValue()) }
 
             InputPhoneNumber(
                 title = "Phone Number",
                 inputTextFieldValue = inputValue,
-                maxLength = 10,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue = it
+                    }
+                },
+                onCallActionClicked = {
+                    // no-op
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").assertTextEquals("")
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").performTextInput("(+91)-9876543210")
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").assertTextEquals("(+91)-9876543210")
+    }
+
+    @Test
+    fun shouldEnableCallActionButtonWhenTextLengthIsEqualOrGreaterThanMinCharacter() {
+        rule.setContent {
+            var inputValue by remember { mutableStateOf(TextFieldValue()) }
+
+            InputPhoneNumber(
+                title = "Phone Number",
+                inputTextFieldValue = inputValue,
+                minLength = 10,
                 onValueChanged = {
                     if (it != null) {
                         inputValue = it
@@ -67,8 +92,11 @@ class InputPhoneNumberTest {
             )
         }
         rule.onNodeWithTag("CALL_PHONE_NUMBER_BUTTON").assertIsNotEnabled()
-        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").performTextInput("1111111111")
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").performTextInput("9876543210")
         rule.onNodeWithTag("CALL_PHONE_NUMBER_BUTTON").assertIsEnabled()
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").performTextClearance()
+        rule.onNodeWithTag("INPUT_PHONE_NUMBER_FIELD").performTextInput("987654321")
+        rule.onNodeWithTag("CALL_PHONE_NUMBER_BUTTON").assertIsNotEnabled()
     }
 
     @Test