LazyColumn inside ModalBottomSheetLayout scroll issue

Question

I have this below composable. when I scroll the lazycolumn, the bottomsheet closes. how to fix this? I have attached the video of the same issue below.

val navController = rememberNavController()
val sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = true,
    confirmValueChange = { it ->
        Log.d("HomePageActivity", "SheetStateInside is $it")
        false
    },
)
val bottomSheetNavigator = remember { BottomSheetNavigator(sheetState) }
navController.navigatorProvider += bottomSheetNavigator
AppTheme {
    ModalBottomSheetLayout(
        bottomSheetNavigator = bottomSheetNavigator,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetBackgroundColor = neutral5,
    ) {
        DestinationsNavHost(
            navController = navController,
            navGraph = NavGraphs.root,
            startRoute = AppChooserBottomSheetDestination,
            engine = rememberAnimatedNavHostEngine(),
        )
       }
}

My LazyColumn file

@Destination(style = DestinationStyleBottomSheet::class)
// @Destination
@Composable
fun AppChooserBottomSheet(
    navigator: DestinationsNavigator,
) {
        LazyColumn {
            repeat(100) {
                item {
                    Text(text = "App $it", style = MaterialTheme.typography.titleLarge, color = neutral100, modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp))
                    Log.d("HomePageActivity", "SheetStateAppChooser visible is $it")
                }
            }
        }
}

Video link: here

Same issue happens with with Column(modifier = Modifier.verticalScroll(rememberScrollState())) { instead of LazyColumn.

Answer 1

Since you're using ModalBottomSheetLayout, you can solve this issue by simply using the option sheetGesturesEnabled = false in your sheet. Full sample code:

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun ModalBottomSheetExample() {
    val state = rememberModalBottomSheetState(
        initialValue = Hidden,
        skipHalfExpanded = true,
    )
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = state,
        sheetGesturesEnabled = false, // here!
        sheetContent = {
            LazyColumn {
                items(50) {
                    Text(
                        modifier = Modifier.fillMaxWidth()
                            .clickable { scope.launch { state.hide() } },
                        text = "Item $it"
                    )
                }
            }
        }
    ) {
        Column {
            Button(onClick = { scope.launch { state.show() } }) {
                Text("Show sheet")
            }
        }
    }
}