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/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/SelectParentSpaceOptions.kt
+++ b/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/SelectParentSpaceOptions.kt
@ -95,7 +95,8 @@ internal fun SelectParentSpaceOptions(
                    sheetState.hide(coroutineScope) {
                        displaySelectSpaceBottomSheet = false
                    }
-                }
+                },
+                scrollable = false,
            ) {
                SelectParentSpaceBottomSheet(
                    spaces = spaces,
--- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/roomlist/RoomListContextMenu.kt
+++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/roomlist/RoomListContextMenu.kt
@ -11,6 +11,8 @@ package io.element.android.features.home.impl.roomlist
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@ -43,6 +45,7 @@ fun RoomListContextMenu(
 ) {
    ModalBottomSheet(
        onDismissRequest = { eventSink(RoomListEvent.HideContextMenu) },
+        scrollable = false,
    ) {
        RoomListModalBottomSheetContent(
            contextMenu = contextMenu,
@ -91,7 +94,9 @@ private fun RoomListModalBottomSheetContent(
    onReportRoomClick: () -> Unit,
 ) {
    Column(
-        modifier = Modifier.fillMaxWidth()
+        modifier = Modifier
+            .fillMaxWidth()
+            .verticalScroll(rememberScrollState())
    ) {
        ListItem(
            headlineContent = {
--- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/roomlist/RoomListDeclineInviteMenu.kt
+++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/roomlist/RoomListDeclineInviteMenu.kt
@ -13,6 +13,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.runtime.Composable
 import androidx.compose.ui.Alignment
@ -45,6 +47,7 @@ fun RoomListDeclineInviteMenu(
 ) {
    ModalBottomSheet(
        onDismissRequest = { eventSink(RoomListEvent.HideDeclineInviteMenu) },
+        scrollable = false,
    ) {
        RoomListDeclineInviteMenuContent(
            roomName = menu.roomSummary.name?.toSafeLength(
@ -81,7 +84,8 @@ private fun RoomListDeclineInviteMenuContent(
    Column(
        modifier = Modifier
            .fillMaxWidth()
-            .padding(all = 16.dp),
+            .padding(all = 16.dp)
+            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
--- a/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/spacefilters/SpaceFiltersView.kt
+++ b/features/home/impl/src/main/kotlin/io/element/android/features/home/impl/spacefilters/SpaceFiltersView.kt
@ -81,7 +81,8 @@ fun SpaceFiltersView(
                if (state is SpaceFiltersState.Selecting) {
                    state.eventSink(SpaceFiltersEvent.Selecting.Cancel)
                }
-            }
+            },
+            scrollable = false,
        ) {
            Box(
                modifier = Modifier
--- a/features/invitepeople/impl/src/main/kotlin/io/element/android/features/invitepeople/impl/InvitePeopleView.kt
+++ b/features/invitepeople/impl/src/main/kotlin/io/element/android/features/invitepeople/impl/InvitePeopleView.kt
@ -262,6 +262,7 @@ private fun InvitePeopleConfirmModal(
    ModalBottomSheet(
        onDismissRequest = onDismiss,
        dragHandle = null,
+        scrollable = false,
    ) {
        IconTitleSubtitleMolecule(
            title = simplePluralStringResource(
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt
@ -156,6 +156,7 @@ fun ActionListView(
            sheetState = sheetState,
            onDismissRequest = ::onDismiss,
            modifier = modifier,
+            scrollable = false,
        ) {
            ActionListViewContent(
                state = state,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/sendfailure/resolve/ResolveVerifiedUserSendFailureView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/sendfailure/resolve/ResolveVerifiedUserSendFailureView.kt
@ -75,6 +75,7 @@ fun ResolveVerifiedUserSendFailureView(
                    .navigationBarsPadding(),
                sheetState = sheetState,
                onDismissRequest = ::dismiss,
+                scrollable = true,
            ) {
                IconTitleSubtitleMolecule(
                    modifier = Modifier.padding(24.dp),
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt
@ -13,6 +13,8 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
+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
@ -74,7 +76,8 @@ internal fun AttachmentsBottomSheet(
            sheetState = rememberModalBottomSheetState(
                skipPartiallyExpanded = true
            ),
-            onDismissRequest = { isVisible = false }
+            onDismissRequest = { isVisible = false },
+            scrollable = false,
        ) {
            AttachmentSourcePickerMenu(
                state = state,
@ -97,6 +100,7 @@ private fun AttachmentSourcePickerMenu(
        modifier = Modifier
            .navigationBarsPadding()
            .imePadding()
+            .verticalScroll(rememberScrollState())
    ) {
        ListItem(
            modifier = Modifier.clickable { state.eventSink(MessageComposerEvent.PickAttachmentSource.PhotoFromCamera) },
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/CustomReactionBottomSheet.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/CustomReactionBottomSheet.kt
@ -50,7 +50,8 @@ fun CustomReactionBottomSheet(
        ModalBottomSheet(
            onDismissRequest = ::onDismiss,
            sheetState = sheetState,
-            modifier = modifier
+            modifier = modifier,
+            scrollable = false,
        ) {
            val presenter = remember {
                EmojiPickerPresenter(
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt
@ -90,7 +90,8 @@ fun ReactionSummaryView(
    if (state.target != null) {
        ModalBottomSheet(
            onDismissRequest = ::onDismiss,
-            modifier = modifier
+            modifier = modifier,
+            scrollable = false,
        ) {
            ReactionSummaryViewContent(summary = state.target)
        }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/receipt/bottomsheet/ReadReceiptBottomSheet.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/receipt/bottomsheet/ReadReceiptBottomSheet.kt
@ -57,7 +57,8 @@ internal fun ReadReceiptBottomSheet(
                    sheetState.hide()
                    state.eventSink(ReadReceiptBottomSheetEvent.Dismiss)
                }
-            }
+            },
+            scrollable = false,
        ) {
            ReadReceiptBottomSheetContent(
                state = state,
--- a/features/rolesandpermissions/impl/src/main/kotlin/io/element/android/features/rolesandpermissions/impl/root/RolesAndPermissionsView.kt
+++ b/features/rolesandpermissions/impl/src/main/kotlin/io/element/android/features/rolesandpermissions/impl/root/RolesAndPermissionsView.kt
@ -153,6 +153,7 @@ private fun ChangeOwnRoleBottomSheet(
            .navigationBarsPadding(),
        sheetState = sheetState,
        onDismissRequest = ::dismiss,
+        scrollable = true,
    ) {
        Text(
            modifier = Modifier.padding(14.dp),
--- a/features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/RoomMemberModerationView.kt
+++ b/features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/RoomMemberModerationView.kt
@ -17,6 +17,8 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.systemBarsPadding
+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
@ -224,9 +226,12 @@ private fun RoomMemberActionsBottomSheet(
                onDismiss()
            }
        },
+        scrollable = false,
    ) {
        Column(
-            modifier = Modifier.padding(vertical = 16.dp)
+            modifier = Modifier
+                .padding(vertical = 16.dp)
+                .verticalScroll(rememberScrollState())
        ) {
            Avatar(
                avatarData = user.getAvatarData(size = AvatarSize.RoomListManageUser),
--- a/features/startchat/impl/src/main/kotlin/io/element/android/features/startchat/impl/joinbyaddress/JoinRoomByAddressView.kt
+++ b/features/startchat/impl/src/main/kotlin/io/element/android/features/startchat/impl/joinbyaddress/JoinRoomByAddressView.kt
@ -13,8 +13,10 @@ 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.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@ -52,11 +54,13 @@ fun JoinRoomByAddressView(
        onDismissRequest = {
            state.eventSink(JoinRoomByAddressEvent.Dismiss)
        },
+        scrollable = false,
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
-                .padding(all = 16.dp),
+                .padding(all = 16.dp)
+                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            RoomAddressField(
--- 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),
        ) {