WheelTimePicker does not recompose if startTime is changed manually

[hiasel]

I would like to manually change the time on a button click, for instance:

                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {

                        var changeableTime: LocalTime by remember {
                            mutableStateOf(LocalTime.now())
                        }
                        WheelTimePicker(
                            startTime = changeableTime,
                            timeFormat = TimeFormat.HOUR_24,
                            size = DpSize(200.dp, 100.dp),
                            rowCount = 5,
                            textStyle = MaterialTheme.typography.titleSmall,
                            textColor = Color(0xFFffc300),
                            selectorProperties = WheelPickerDefaults.selectorProperties(
                                enabled = true,
                                shape = RoundedCornerShape(0.dp),
                                color = Color(0xFFf1faee).copy(alpha = 0.2f),
                                border = BorderStroke(2.dp, Color(0xFFf1faee))
                            )
                        ){ snappedDateTime ->
                            // Do something with snapped time
                        }

                        Button(onClick = {
                            changeableTime = LocalTime.now()
                        }) {
                            Text(text = "Set time to now")
                        }
                    }

Unfortunately the WheelTimePicker does not get recomposed when startTime is mutable and changed.
Should this work using the library or is this out of scope?

[Igor-san]

I used the following trick:

@Composable
fun CalendarPicker() {

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        var changeableTime = LocalTime.now()

        var change by remember {mutableStateOf(false)}

        if (change){
            ShowPicker(changeableTime)
        } else {
            ShowPicker(changeableTime)
        }


        Button(onClick = {
            changeableTime = LocalTime.now()
            change = !change
        }) {
            Text(text = "Set time to now")
        }
    }
}
@Composable
fun ShowPicker(changeableTime: LocalTime) {
    WheelTimePicker(
        startTime = changeableTime,
        timeFormat = TimeFormat.HOUR_24,
        size = DpSize(200.dp, 100.dp),
        rowCount = 5,
        textStyle = MaterialTheme.typography.titleSmall,
        textColor = Color(0xFFffc300),
        selectorProperties = WheelPickerDefaults.selectorProperties(
            enabled = true,
            shape = RoundedCornerShape(0.dp),
            color = Color(0xFFf1faee).copy(alpha = 0.2f),
            border = BorderStroke(2.dp, Color(0xFFf1faee))
        )
    ){ snappedDateTime ->
        // Do something with snapped time
    }
}

[masoudkarimi]

@hiasel Use key composable function to ensure recomposation. This composable accepts a key and when ever it changes all the children composables will recompose.

key(changeableTime) {
    WheelTimePicker(
        .....
    )
}