Hi, I am currently using a m3 `ModalBottomSheet` b...

# compose

[rattleshirt]

Hi, I am currently using a m3 ModalBottomSheet but whenever the sheet contents change (through animations) the sheet disappears and animates in from the bottom again. Am I not allowed to have the sheet contents change?

[rattleshirt]

I am following the official docs with:

val modalSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
        confirmValueChange = { false },
    )

    if (isVisible) {
         ModalBottomSheet(
            onDismissRequest = {},
            modifier = modifier,
            sheetState = modalSheetState,

[Stylianos Gakis]

You are definitely allowed to have sheet contents change.
If you share the entire code snippet it might show where the problem is.
My guess is that your state change somehow every time flips the isVisible state on and off again quickly resulting in what you see.

[rattleshirt]

The isVisible comes from the view model and does not change. Complete snippet:

fun NFCBottomSheet(
    modifier: Modifier = Modifier,
    events: LicenseDetailsEvents,
    isVisible: Boolean,
    title: String,
    description: String,
    totalSteps: Int,
    currentStep: Int,
) {
    val modalSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
        confirmValueChange = { false },
    )

    if (isVisible) {
        ModalBottomSheet(
            onDismissRequest = {},
            modifier = modifier,
            sheetState = modalSheetState,
            shape = RoundedCornerShape(
                topStart = largeCornerRadius.dp,
                topEnd = largeCornerRadius.dp,
            ),
            properties = ModalBottomSheetProperties(shouldDismissOnBackPress = false)
        ) {
            NFCBottomSheetContent(
                events = events,
                title = title,
                description = description,
                totalSteps = totalSteps,
                currentStep = currentStep,
            )
        }
    }
}

[rattleshirt]

Where the NFCBottomSheetContent contains at some point:

fun NFCProgress(
    modifier: Modifier = Modifier,
    totalSteps: Int,
    currentStep: Int,
) {
    Column(
        modifier = modifier.padding(vertical = nfcProgressSpacer.dp),
        verticalArrangement = Arrangement.spacedBy(nfcProgressLoadingSpacer.dp),
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = defaultPagePadding.dp),
            horizontalArrangement = Arrangement.spacedBy(nfcProgressStepGap.dp),
        ) {
            (1..totalSteps).forEach {
                NFCProgressStep(
                    modifier = Modifier.weight(1f),
                    totalSteps = totalSteps,
                    currentStep = currentStep,
                    position = it,
                )
            }
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
        ) {
            CircularProgressIndicator(
                modifier = Modifier
                    .size(buttonLoadingIndicatorSize.dp),
            )
        }
    }
}

@Composable
fun NFCProgressStep(
    modifier: Modifier = Modifier,
    totalSteps: Int,
    currentStep: Int,
    position: Int,
) {
    var progress by remember { mutableFloatStateOf(0f) }
    val animatedProgress by animateFloatAsState(
        targetValue = progress,
        animationSpec = tween(),
        label = "progress",
    )

    LaunchedEffect(progress, currentStep, position) {
        progress = if (currentStep >= position) 1f else 0f
    }

    LinearProgressIndicator(
        progress = { animatedProgress },
        modifier = modifier
            .height(nfcProgressStepHeight.dp)
            .stepShape(totalSteps, position),
        trackColor = Color.LightGray,
        color = MaterialTheme.colorScheme.primary,
        strokeCap = StrokeCap.Square,
        drawStopIndicator = {},
    )
}

[rattleshirt]

Here how it behaves:

ModalBottomSheet.mp4

[Stylianos Gakis]

If you add

SideEffect { Log.d("DEBUG", "isVisible:$isVisible") }
if (isVisible) {

Right above the isVisible check you do there, what does that print?

[Tolriq]

are you using M3 1.2? Try 1.3 they fixed those kind of issues.

[rattleshirt]

I am using 1.3-beta03

[rattleshirt]

The isVisible doesn’t change:

10:06:56.654  D  DEBUG isVisible:false
10:07:00.633  D  DEBUG isVisible:true
10:07:10.695  D  DEBUG isVisible:true
10:07:30.772  D  DEBUG isVisible:true

What I do see is that currentValue stays Hidden 🤔

[Tolriq]

For 1.3 it's fixed, but are you using Kotlin 2.0 ? There's a bug in the compiler and you may need to use .

confirmValueChange = remember { { false } }

[rattleshirt]

Yes, I am using 2.0. That was it. Thank you 🙏

[Stylianos Gakis]

> The isVisible doesn't change:
>
Welp, it was worth a shot.

Probably then it's what Tolriq is saying. M3 bottom sheets are notorious for having bugs tbh, not surprised to see this here.

[rattleshirt]

Risks of being cutting edge 😅

[Stylianos Gakis]

Wow that's the solution? I can't even fathom how that was a problem in the first place 🫣🫣

[Tolriq]

M3 bottom sheets are notorious for having bugs

Yes they recently moved to popup and this broke edge to edge too 🙂 And no more answering on the issue.

[Tolriq]

And for the issue: https://issuetracker.google.com/issues/340582180

[Tolriq]

(the kotlin 2.0 one)