A modern programming language that makes developers happier.

kotlinlang

I am facing an issue when I am trying to show two different kinds of Modals in the same screen. I need to tap the button twice to show the dialog. Seems like I am not handling the states right. Any suggestions?

bug tap.mp4

Here is the code for toggle:
```@ExperimentalMaterialApi
@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    Modal(
        title = "タイトル",
        type = modalType,
        state = modalState,
        onActionClick = {},
        onNavigationClick = {
            modalState.hide()
        },
        modalContent = {
            emptyContent()
        }
    ) {
        Screen(
            onHalfModalButtonClick = {
                modalType = ModalType.HALF
                modalState.show()
            },
            onFullModalButtonClick = {
                modalType = ModalType.FULL
                modalState.show()
            }
        )
    }
}```


What if you do something like
```@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    if(modalState.value is Shown) {
       Modal(...) {
           ...
       }
    }
}```

This way, the screen doesn’t gets composed so no button to click because the modal is what owns the screen which is hidden initially.

```@Composable
private fun SetupModals() {
    var modalType: ModalType by remember { mutableStateOf(ModalType.HALF) }
    val modalState = rememberModalState(initialValue = ModalStateValue.Hidden)

    ModalButtons(
      ...,
      onHalfModalClick = {
         modalState = ShowHalf
      },
      onFullModalClick = {
         modalState = ShowFull
      }, 
   )
  
   if (modalState is ShowHalf) {
      HalfModal(onExit = { modalState = Hidden })
   } else if (modalState is ShowFull) {
      FullModal(onExit = { modalState = Hidden })
   }
}```
Where `ModalButtons` represents the buttons, and `Half/FullModal` represents the actual Modal (with modal type Half/Full).

Edit 1: updated to simplify
Edit 2: added example of Modal exit callbacks