IssueTracker

Hello,

Jetpack Compose version: 1.2.1 Kotlin version : 1.7.10

I use a ModalBottomSheetLayout with sheet content which can change. In this configuration, I can't click on buttons in bottom sheet when it's open for a while. It's as if the bottom sheet hadn't finished growing and had to go up to the top of the screen.

Code Sample :

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.SpringSpec
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    
    @OptIn(ExperimentalMaterialApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainScreen()
        }
    }
}


@ExperimentalMaterialApi
@Composable
fun MainScreen() {

    var currentBottomSheet: BottomSheetType? by remember {
        mutableStateOf(null)
    }

    val modalBottomSheetState = rememberModalBottomSheetState(
        ModalBottomSheetValue.Hidden,
        skipHalfExpanded = true,
        animationSpec = SpringSpec(stiffness = 10f)
    )

    val scope = rememberCoroutineScope()

    val closeSheet = {
        scope.launch { modalBottomSheetState.hide() }
    }

    val openSheet = {
        scope.launch { modalBottomSheetState.show() }
    }


    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetState = modalBottomSheetState,
        sheetContent = {
            BottomSheetContent(currentBottomSheet){ closeSheet() }
        }
    ) {

        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = CenterHorizontally,

            ) {
            Spacer(modifier = Modifier.height(16.dp))

            Button(onClick = {
                currentBottomSheet = BottomSheetType.TYPE1
                openSheet()
            }) {
                Text(text = "BottomSheet 1")
            }

            Spacer(modifier = Modifier.height(10.dp))

            Button(onClick = {
                currentBottomSheet = BottomSheetType.TYPE2
                openSheet()
            }) {
                Text(text = "BottomSheet 2")
            }

        }

    }
}

@Composable
fun BottomSheetContent(currentBottomSheet: BottomSheetType?, closeSheet: () -> Unit){
    when (currentBottomSheet) {
        BottomSheetType.TYPE1 -> Screen1(closeSheet)
        else -> Screen2()
    }
}

@Composable
fun Screen1(closeSheet: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalAlignment = CenterHorizontally
        ) {
            Spacer(modifier = Modifier.height(100.dp))
            Text(text = "Bottom sheet type 1")
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = { closeSheet() }) {
                Text(text = "Close")
            }
            Spacer(modifier = Modifier.height(50.dp))
        }
    }

}

@Composable
fun Screen2() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalAlignment = CenterHorizontally
        ) {
            Spacer(modifier = Modifier.height(100.dp))
            Text(text = "Bottom sheet type 3")
        }
    }
}

enum class BottomSheetType {
    TYPE1, TYPE2
}

I put a slow animation to better see the problem. If you open Bottom Sheet 1, it's impossible to click on the button for a while.

Is it a bug or am i making the multi bottomsheet wrong ?