Ensure that all the ModalBottomSheet can scroll.

2026-04-27 10:23:56 +02:00 · 2026-04-27 10:23:56 +02:00 · 09ff3294d5
commit 09ff3294d5
parent bf57223d05
21 changed files with 88 additions and 22 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/SimpleModalBottomSheet.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/SimpleModalBottomSheet.kt
@ -14,6 +14,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@ -38,11 +40,13 @@ fun SimpleModalBottomSheet(
        onDismissRequest = onDismiss,
        modifier = modifier,
        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
-                .padding(16.dp),
+                .padding(16.dp)
+                .verticalScroll(rememberScrollState()),
        ) {
            Text(
                title,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheet.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheet.kt
@ -10,10 +10,13 @@ package io.element.android.libraries.designsystem.theme.components

 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@ -42,10 +45,15 @@ import io.element.android.libraries.designsystem.preview.sheetStateForPreview
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch

+/**
+ * For parameter [scrollable], set it to true if the content of the sheet does not already contain a scrollable component, such as a LazyColumn,
+ * to avoid nested scroll issues. In this case, the content will be wrapped in a Column with verticalScroll.
+ */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
 fun ModalBottomSheet(
    onDismissRequest: () -> Unit,
+    scrollable: Boolean,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
@ -79,8 +87,17 @@ fun ModalBottomSheet(
        scrimColor = scrimColor,
        dragHandle = dragHandle,
        contentWindowInsets = contentWindowInsets,
-        content = content,
-    )
+    ) {
+        if (scrollable) {
+            Column(
+                modifier = Modifier.verticalScroll(rememberScrollState()),
+            ) {
+                content()
+            }
+        } else {
+            content()
+        }
+    }
 }

@OptIn(ExperimentalMaterial3Api::class)
@ -112,6 +129,7 @@ private fun ContentToPreview() {
    ) {
        ModalBottomSheet(
            onDismissRequest = {},
+            scrollable = false,
        ) {
            Text(
                text = "Sheet Content",
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt
@ -67,6 +67,7 @@ fun AvatarActionBottomSheet(
            },
            modifier = modifier,
            sheetState = sheetState,
+            scrollable = false,
        ) {
            AvatarActionBottomSheetContent(
                actions = actions,
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CreateDmConfirmationBottomSheet.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CreateDmConfirmationBottomSheet.kt
@ -14,6 +14,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
@ -74,11 +76,13 @@ fun CreateDmConfirmationBottomSheet(
        modifier = modifier,
        onDismissRequest = onDismiss,
        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
-                .padding(top = 24.dp, bottom = 16.dp, start = 16.dp, end = 16.dp),
+                .padding(top = 24.dp, bottom = 16.dp, start = 16.dp, end = 16.dp)
+                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            if (isUserIdentityUnknown) {
@ -148,9 +152,11 @@ fun CreateDmConfirmationBottomSheet(

@PreviewsDayNight
@Composable
-internal fun CreateDmConfirmationBottomSheetPreview(@PreviewParameter(
-    CreateDmConfirmationBottomSheetStateProvider::class
-) state: CreateDmConfirmationBottomSheetState) = ElementPreview {
+internal fun CreateDmConfirmationBottomSheetPreview(
+    @PreviewParameter(
+        CreateDmConfirmationBottomSheetStateProvider::class
+    ) state: CreateDmConfirmationBottomSheetState
+) = ElementPreview {
    CreateDmConfirmationBottomSheet(
        matrixUser = state.matrixUser,
        isUserIdentityUnknown = state.isUserIdentityUnknown,
@ -166,7 +172,7 @@ data class CreateDmConfirmationBottomSheetState(

 class CreateDmConfirmationBottomSheetStateProvider : PreviewParameterProvider<CreateDmConfirmationBottomSheetState> {
    override val values = sequenceOf(
-            CreateDmConfirmationBottomSheetState(matrixUser = aMatrixUser(), isUserIdentityUnknown = false),
-            CreateDmConfirmationBottomSheetState(matrixUser = aMatrixUser(), isUserIdentityUnknown = true),
-        )
+        CreateDmConfirmationBottomSheetState(matrixUser = aMatrixUser(), isUserIdentityUnknown = false),
+        CreateDmConfirmationBottomSheetState(matrixUser = aMatrixUser(), isUserIdentityUnknown = true),
+    )
 }
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDeleteConfirmationBottomSheet.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDeleteConfirmationBottomSheet.kt
@ -59,7 +59,8 @@ fun MediaDeleteConfirmationBottomSheet(
    ModalBottomSheet(
        modifier = modifier,
        onDismissRequest = onDismiss,
-        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDetailsBottomSheet.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDetailsBottomSheet.kt
@ -72,6 +72,7 @@ fun MediaDetailsBottomSheet(
    ModalBottomSheet(
        modifier = modifier,
        onDismissRequest = onDismiss,
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/CaptionWarningBottomSheet.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/CaptionWarningBottomSheet.kt
@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@ -37,11 +39,13 @@ fun CaptionWarningBottomSheet(
    ModalBottomSheet(
        modifier = modifier,
        onDismissRequest = onDismiss,
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
-                .padding(horizontal = 16.dp),
+                .padding(horizontal = 16.dp)
+                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {