Androapp 6191 mobile UI select input field clickability issue (#262)

* Fix the clickable area for `InputDropDown` * Fix the clickable area for `InputOrgUnit` --------- Co-authored-by: Siddharth Agarwal <[email protected]>
dhis2 · Jul 8, 2024 · d4cd2e5 · d4cd2e5
1 parent 3c598d1
commit d4cd2e5
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 125 deletions.
diff --git a/...tem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt b/...tem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
@@ -41,6 +42,8 @@ import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource
 import org.hisp.dhis.mobile.ui.designsystem.theme.DHIS2SCustomTextStyles
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing0
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing16
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing56
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing64
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing8
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
@@ -273,30 +276,30 @@ fun DropdownInputField(
     onDropdownIconClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    InputShell(
-        modifier = modifier
-            .testTag("INPUT_DROPDOWN")
-            .focusRequester(focusRequester),
-        title = title,
-        state = state,
-        isRequiredField = isRequiredField,
-        onFocusChanged = onFocusChanged,
-        supportingText = {
-            supportingTextData?.forEach { label ->
-                SupportingText(
-                    label.text,
-                    label.state,
-                    modifier = Modifier.testTag("INPUT_DROPDOWN_SUPPORTING_TEXT"),
-                )
-            }
-        },
-        legend = {
-            legendData?.let {
-                Legend(legendData, Modifier.testTag("INPUT_DROPDOWN_LEGEND"))
-            }
-        },
-        inputField = {
-            Box {
+    Box {
+        InputShell(
+            modifier = modifier
+                .testTag("INPUT_DROPDOWN")
+                .focusRequester(focusRequester),
+            title = title,
+            state = state,
+            isRequiredField = isRequiredField,
+            onFocusChanged = onFocusChanged,
+            supportingText = {
+                supportingTextData?.forEach { label ->
+                    SupportingText(
+                        label.text,
+                        label.state,
+                        modifier = Modifier.testTag("INPUT_DROPDOWN_SUPPORTING_TEXT"),
+                    )
+                }
+            },
+            legend = {
+                legendData?.let {
+                    Legend(legendData, Modifier.testTag("INPUT_DROPDOWN_LEGEND"))
+                }
+            },
+            inputField = {
                 Text(
                     modifier = Modifier
                         .testTag("INPUT_DROPDOWN_TEXT")
@@ -313,57 +316,59 @@ fun DropdownInputField(
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                 )
-                Box(
-                    modifier = Modifier
-                        .matchParentSize()
-                        .alpha(0f)
-                        .clickable(
-                            enabled = state != InputShellState.DISABLED,
-                            onClick = {
-                                focusRequester.requestFocus()
-                                onDropdownIconClick()
-                            },
-                        ),
-                )
-            }
-        },
-        primaryButton = {
-            IconButton(
-                modifier = Modifier.testTag("INPUT_DROPDOWN_ARROW_BUTTON").onFocusChanged {
-                    onFocusChanged?.invoke(it.isFocused)
-                },
-                enabled = state != InputShellState.DISABLED,
-                icon = {
-                    ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
-                },
-                onClick = {
-                    focusRequester.requestFocus()
-                    onDropdownIconClick()
-                },
-            )
-        },
-        secondaryButton =
-        if (selectedItem != null && state != InputShellState.DISABLED) {
-            {
+            },
+            primaryButton = {
                 IconButton(
-                    modifier = Modifier.testTag("INPUT_DROPDOWN_RESET_BUTTON"),
+                    modifier = Modifier.testTag("INPUT_DROPDOWN_ARROW_BUTTON").onFocusChanged {
+                        onFocusChanged?.invoke(it.isFocused)
+                    },
+                    enabled = state != InputShellState.DISABLED,
                     icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Cancel,
-                            contentDescription = "Reset Button",
-                        )
+                        ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
                     },
                     onClick = {
                         focusRequester.requestFocus()
-                        onResetButtonClicked.invoke()
+                        onDropdownIconClick()
                     },
                 )
-            }
-        } else {
-            null
-        },
-        inputStyle = inputStyle,
-    )
+            },
+            secondaryButton =
+            if (selectedItem != null && state != InputShellState.DISABLED) {
+                {
+                    IconButton(
+                        modifier = Modifier.testTag("INPUT_DROPDOWN_RESET_BUTTON"),
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Cancel,
+                                contentDescription = "Reset Button",
+                            )
+                        },
+                        onClick = {
+                            focusRequester.requestFocus()
+                            onResetButtonClicked.invoke()
+                        },
+                    )
+                }
+            } else {
+                null
+            },
+            inputStyle = inputStyle,
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(Spacing64)
+                .padding(end = Spacing56)
+                .alpha(0f)
+                .clickable(
+                    enabled = state != InputShellState.DISABLED,
+                    onClick = {
+                        focusRequester.requestFocus()
+                        onDropdownIconClick()
+                    },
+                ),
+        )
+    }
 }
 
 /**

diff --git a/...stem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputOrgUnit.kt b/...stem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputOrgUnit.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowDropDown
@@ -26,6 +27,8 @@ import androidx.compose.ui.platform.testTag
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
 import org.hisp.dhis.mobile.ui.designsystem.theme.InternalFloatValues
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing112
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing.Spacing64
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.textFieldHoverPointerIcon
 
@@ -105,46 +108,46 @@ fun InputOrgUnit(
             )
         }
     }
-    InputShell(
-        modifier = modifier
-            .testTag("INPUT_ORG_UNIT")
-            .focusRequester(focusRequester),
-        isRequiredField = isRequiredField,
-        title = title,
-        primaryButton = primaryButton,
-        secondaryButton = {
-            SquareIconButton(
-                modifier = Modifier.testTag("ORG_UNIT_BUTTON"),
-                enabled = state != InputShellState.DISABLED,
-                icon = {
-                    Icon(
-                        painter = provideDHIS2Icon("org_unit"),
-                        contentDescription = "org_unit_icon",
-                    )
-                },
-                onClick = {
-                    focusRequester.requestFocus()
-                    onOrgUnitActionCLicked.invoke()
-                },
-            )
-        },
-        state = state,
-        legend = {
-            legendData?.let {
-                Legend(legendData, Modifier.testTag("INPUT_ORG_UNIT_LEGEND"))
-            }
-        },
-        supportingText = {
-            supportingText?.forEach { label ->
-                SupportingText(
-                    label.text,
-                    label.state,
-                    modifier = Modifier.testTag("INPUT_ORG_UNIT_SUPPORTING_TEXT"),
+    Box {
+        InputShell(
+            modifier = modifier
+                .testTag("INPUT_ORG_UNIT")
+                .focusRequester(focusRequester),
+            isRequiredField = isRequiredField,
+            title = title,
+            primaryButton = primaryButton,
+            secondaryButton = {
+                SquareIconButton(
+                    modifier = Modifier.testTag("ORG_UNIT_BUTTON"),
+                    enabled = state != InputShellState.DISABLED,
+                    icon = {
+                        Icon(
+                            painter = provideDHIS2Icon("org_unit"),
+                            contentDescription = "org_unit_icon",
+                        )
+                    },
+                    onClick = {
+                        focusRequester.requestFocus()
+                        onOrgUnitActionCLicked.invoke()
+                    },
                 )
-            }
-        },
-        inputField = {
-            Box {
+            },
+            state = state,
+            legend = {
+                legendData?.let {
+                    Legend(legendData, Modifier.testTag("INPUT_ORG_UNIT_LEGEND"))
+                }
+            },
+            supportingText = {
+                supportingText?.forEach { label ->
+                    SupportingText(
+                        label.text,
+                        label.state,
+                        modifier = Modifier.testTag("INPUT_ORG_UNIT_SUPPORTING_TEXT"),
+                    )
+                }
+            },
+            inputField = {
                 val enabled = state != InputShellState.DISABLED
                 androidx.compose.foundation.text.BasicTextField(
 
@@ -170,23 +173,24 @@ fun InputOrgUnit(
                             }
                         }
                     },
-
-                )
-                Box(
-                    modifier = Modifier
-                        .matchParentSize()
-                        .alpha(0f)
-                        .clickable(
-                            onClick = {
-                                focusRequester.requestFocus()
-                                onOrgUnitActionCLicked.invoke()
-                            },
-                            enabled = enabled,
-                        ),
                 )
-            }
-        },
-        onFocusChanged = onFocusChanged,
-        inputStyle = inputStyle,
-    )
+            },
+            onFocusChanged = onFocusChanged,
+            inputStyle = inputStyle,
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(Spacing64)
+                .padding(end = Spacing112)
+                .alpha(0f)
+                .clickable(
+                    enabled = state != InputShellState.DISABLED,
+                    onClick = {
+                        focusRequester.requestFocus()
+                        onOrgUnitActionCLicked.invoke()
+                    },
+                ),
+        )
+    }
 }