Prevent Material3 TimeInput from always requiring focus

23 views Asked by At

I'm implementing a custom dialog that combines Material3's DatePicker and TimeInput into one Dialog to allow a user to select a start date and time in one action. It looks good but TimeInput always has focus in either the hours or minutes input box, and there doesn't seem to be any way to end this focus. I haven't seen anything in any documentation about this focus behavior. This almost seems like a bug. Am I missing some way to prevent this?

This is the behavior I see when the dialog is opened. The Hour box is selected and keyboard automatically opens. Tapping outside the TimePicker does not affect focus. Closing keyboard does not even clear focus.

enter image description here

This is the code for my custom DateTimeDialog

@Suppress("LongParameterList")
@Composable
fun DateTimeDialog(
    datePickerState: DatePickerState,
    timeInputState: TimePickerState,
    pickerType: CalendarPickerType,
    title: @Composable () -> Unit = { DefaultTitle() },
    headline: @Composable () -> Unit = { DefaultHeadline(state = datePickerState) },
    onDismissRequest: () -> Unit,
    onConfirmRequest: (DateTimeData) -> Unit,
    dismissButtonText: String = stringResource(id = R.string.cancel),
    confirmButtonText: String = stringResource(id = R.string.save)
) {
    Dialog(onDismissRequest = onDismissRequest) {
        Column(
            modifier = Modifier
                .background(
                    Theme.colors.backgroundPrimary,
                    RoundedCornerShape(Theme.spacing.spacing150)
                ),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            DatePicker(
                modifier = Modifier
                    .clip(RoundedCornerShape(Theme.spacing.spacing150)),
                title = title,
                state = datePickerState,
                headline = headline,
                dateValidator = { calendarValidator(pickerType, it) },
                showModeToggle = false,
                colors = datePickerColors()
            )

            TimeInput(
                state = timeInputState,
                colors = timePickerColors()
            )

            BottomButtons(
                confirmButtonEnabled = datePickerState.selectedDateMillis != null,
                onDismissRequest = onDismissRequest,
                onConfirmRequest = {
                    datePickerState.selectedDateMillis?.let {
                        onConfirmRequest(
                            DateTimeData(
                                dateEpochMilli = it,
                                timeHour = timeInputState.hour,
                                timeMinute = timeInputState.minute
                            )
                        )
                    }
                },
                dismissButtonText = dismissButtonText,
                confirmButtonText = confirmButtonText
            )
        }
    }
}
0

There are 0 answers