Fix the clickable area for InputDropDown

dhis2 · Jun 28, 2024 · 2cdf53c · 2cdf53c
1 parent 6f352c0
commit 2cdf53c
Showing 1 changed file with 73 additions and 68 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()
+                    },
+                ),
+        )
+    }
 }
 
 /**