Nest / multiple dialogs in shiny

Question

is it possible to open multiple dialogs in shiny?

In the following app I'd like to show a modal dialog which itself can open another "details" modal dialog. This works well, but whenever the "details" dialog is opened the first dialog disappears.

I'd like to open the second dialog "on top" of the first one and whenever I close the second dialog I'd like to see the first dialog again.

How would I do that with shiny?

library(shiny)

ui <- basicPage({
  actionButton("openDialog", "Open dialog")
})

server <- function(input, output, session) {

  observeEvent(input$openDialog, {
    showModal(
      modalDialog(
        actionButton("openDetails", "OpenDetails")
      )
    )
  })

  observeEvent(input$openDetails, {
    showModal(modalDialog(div("Test")))
  })
}

shinyApp(ui = ui, server = server)

Answer 1

This isn't exactly what you want, but you can always restore the first modal after the second model is dismissed. To do this, after your library(shiny) statement, add a function to display the first model:

library(shiny)
showFirstModal <- function() {
  showModal(
    modalDialog(
      actionButton("openDetails", "OpenDetails")
    )
  )
}

Then change the observe event code that calls the first modal to one that calls the function:

observeEvent(input$openDialog, {
    showFirstModal()
})

Then, when creating the second modal, force the user to hit your own action button to close it. This will allow you to monitor the closing of that modal and then restore the first modal:

observeEvent(input$openDetails, {
    showModal(modalDialog(div("Test"),
          easyClose=FALSE,
          footer = actionButton("restoreModal",label = "Dismiss")))
})

Finally, call the function to re-display the first modal when the dismiss button is hit:

observeEvent(input$restoreModal, {
    showFirstModal()
})

If you truly want to display multiple modal boxes on top of each other (which might look cluttered), you can create the modals manually (see https://www.w3schools.com/howto/howto_css_modals.asp on how to accomplish this).