Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Androapp 6191 mobile UI select input field clickability issue #262

Merged
merged 2 commits into from
Jul 8, 2024
Merged

Androapp 6191 mobile UI select input field clickability issue #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7cfdaa
Fix the clickable area for `InputDropDown`
Jun 28, 2024
47f5e68
Fix the clickable area for `InputOrgUnit`
Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 73 additions & 68 deletions ...tem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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")
Expand All @@ -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()
},
),
)
}
}

/**
Expand Down
118 changes: 61 additions & 57 deletions ...stem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputOrgUnit.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down Expand Up @@ -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(

Expand All @@ -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()
},
),
)
}
}
Loading