Multiple ModalBottomSheet in Compose not updated when state changes

Question

I have implemented 2 bottom sheets in the ModalBottomSheetLayout, both bottom sheets has a list of item checkable with checkbox. The state of the screen is managed by the viewModel and when the selection changes is invoked a function that copies the state with the new value of the selected text. When the bottom sheet opens the selection is correct but when I click to change the selection, the bottomsheet is not recomposed and the selection does not change, but in the main screen the state change is correctly read and the value is updated.

Here my code:

MainScreen:

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@ExperimentalMaterialApi
@Composable
fun MainScreen(
    viewModel: MainViewModel = androidx.lifecycle.viewmodel.compose.viewModel()
) {

    val screenState = viewModel.screenState

    val scope = rememberCoroutineScope()

    val bottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden
    )

    var bottomSheetContent: (@Composable () -> Unit)? by remember {
        mutableStateOf(null)
    }

    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetContent = {
            Box(
                modifier = Modifier.defaultMinSize(minHeight = 1.dp)
            ) {
                bottomSheetContent?.let { it() }
            }
        }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {

            Text(text = "First BottomSheet", style = MaterialTheme.typography.h6)

            Text(
                text = "Selected: ${screenState.selectedTextFromFirstBottomSheet}",
                Modifier.padding(16.dp)
            )

            Button(onClick = {
                bottomSheetContent = {
                    FirstBottomSheet(
                        selectedText = screenState.selectedTextFromFirstBottomSheet,
                        onSelected = { text ->
                            viewModel.onEvent(
                                MainScreenEvent.OnFirstBottomSheetSelectedTextChanged(text)
                            )
                        },
                        textList = screenState.firstBottomSheetTextList
                    )
                }

                scope.launch {
                    bottomSheetState.show()
                }
            }, modifier = Modifier.padding(16.dp)) {
                Text(text = " Open First BottomSheet")
            }


            Text(text = "Second BottomSheet", style = MaterialTheme.typography.h6)

            Text(
                text = "Selected: ${screenState.selectedTextFromSecondBottomSheet}",
                Modifier.padding(16.dp)
            )

            Button(
                onClick = {
                    bottomSheetContent = {
                        SecondBottomSheet(
                            selectedText = screenState.selectedTextFromSecondBottomSheet,
                            onSelected = { text ->
                                viewModel.onEvent(
                                    MainScreenEvent.OnSecondBottomSheetSelectedTextChanged(text)
                                )
                            },
                            textList = screenState.secondBottomSheetTextList
                        )
                    }

                    scope.launch {
                        bottomSheetState.show()
                    }
                }, modifier = Modifier
                    .padding(16.dp)
            ) {
                Text(text = " Open Second BottomSheet")

            }

        }
    }

}

ViewModel:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel


class MainViewModel : ViewModel(){

    var screenState by mutableStateOf(MainScreenState())

    fun onEvent(event: MainScreenEvent){
        when(event){
            is MainScreenEvent.OnFirstBottomSheetSelectedTextChanged -> {
                screenState = screenState.copy(
                    selectedTextFromFirstBottomSheet = event.text
                )
            }

            is MainScreenEvent.OnSecondBottomSheetSelectedTextChanged -> {
                screenState = screenState.copy(
                    selectedTextFromSecondBottomSheet = event.text
                )
            }
        }
    }
}

ScreenState

data class MainScreenState(
    val selectedTextFromFirstBottomSheet: String = "First Text b1",
    val selectedTextFromSecondBottomSheet: String = "Third Text b2",
    val firstBottomSheetTextList: List<String> = listOf(
        "First Text b1",
        "Second Text b1",
        "Third Text b1",
        "Fourth Text b1",
        "Five Text b1"
    ),
    val secondBottomSheetTextList: List<String> = listOf(
        "First Text b2",
        "Second Text b2",
        "Third Text b2",
        "Fourth Text b2",
        "Five Text b2"
    )
)

Screen Event

sealed class MainScreenEvent(){
    data class OnFirstBottomSheetSelectedTextChanged(val text: String): MainScreenEvent()
    data class OnSecondBottomSheetSelectedTextChanged(val text: String): MainScreenEvent()
}

First Bottom Sheet

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.Checkbox
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

@Composable
fun FirstBottomSheet(
    selectedText: String,
    textList: List<String>,
    onSelected: (text: String) -> Unit
) {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {

        textList.forEach { text ->

            Row(modifier = Modifier
                .fillMaxWidth()
                .toggleable(
                    value = selectedText == text,
                    role = Role.Checkbox,
                    onValueChange = { isSelected ->
                        if (isSelected) {
                            onSelected(text)
                        }
                    }
                )
                .padding(16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {

                Text(text = text, modifier = Modifier.weight(1f))

                Checkbox(checked = selectedText == text, onCheckedChange = null)
            }
        }
    }
}

Second Bottom Sheet

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.Checkbox
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

@Composable
fun SecondBottomSheet(
    selectedText: String,
    textList: List<String>,
    onSelected: (text: String) -> Unit
) {


    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {

        textList.forEach { text ->

            Row(modifier = Modifier
                .fillMaxWidth()
                .toggleable(
                    value = selectedText == text,
                    role = Role.Checkbox,
                    onValueChange = { isSelected ->
                        if (isSelected) {
                            onSelected(text)
                        }

                    }

                )
                .padding(16.dp),
                verticalAlignment = Alignment.CenterVertically) {

                Text(text = text, modifier = Modifier.weight(1f))

                Checkbox(checked = selectedText == text, onCheckedChange = null)
            }
        }
    }
}

Thanks for your help!

Answer 1

I copied and pasted your code. The only changes I made were:

1. Remove this line from MainScreen

val screenState = viewModel.screenState

2. Access the state directly.

Text(
    text = "Selected: ${viewModel.screenState.selectedTextFromFirstBottomSheet}",
    Modifier.padding(16.dp)
)

Button(onClick = {
    bottomSheetContent = {
        FirstBottomSheet(
            selectedText = viewModel.screenState.selectedTextFromFirstBottomSheet,
            onSelected = { text ->
                viewModel.onEvent(
                    MainScreenEvent.OnFirstBottomSheetSelectedTextChanged(text)
                )
            },
            textList = viewModel.screenState.firstBottomSheetTextList
        )
    }

    scope.launch {
        bottomSheetState.show()
    }
}, modifier = Modifier.padding(16.dp)) {
    Text(text = " Open First BottomSheet")
}

Boom! It worked :)

My understanding is: you're creating a variable containing the value of a state, but you're not listening to the state changes, so the Compose doesn't know the state has changed, therefore the recomposition doesn't happen. The by keyword in your state declaration is a property delegate which set/get the current value of state, but not register the composable to react to these changes.

There are another solutions you can use to observe the state without repeat viewModel.screenState:

1. Using derivedStateOf:

val screenState by remember {
    derivedStateOf {
        viewModel.screenState
    }
}

2. Changing the screenState declaration.

// Using "=" instead of "by"
var screenState = mutableStateOf(MainScreenState())

and then use screenState.value to set/get the state value. And in the screen, use like below:

val screenState = viewModel.screenState