Bug: reactOutput may failed to render if there are nested React components within div

[jonekeat]

Code example

library(shiny)
library(shiny.fluent)

# Define the UI for the login module
loginPageUI <- function(id) {
  ns <- NS(id)
  div(
    id = id,
    div(
      class = "login-box",
      PrimaryButton.shinyInput(ns("login_btn"), text = "Sign in")
    ),
    reactOutput(ns("messageBar"))
  )
}

# Define the server logic for the login module
loginPageServer <- function(id, user_session) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    messageBarUI <- reactiveVal(NULL)
    observeEvent(input$login_btn, {
      user_session$logged <- TRUE
      user_session$page_name <- "firstPage"
      messageBarUI(
        MessageBar("Message")
      )
    })
    output$messageBar <- renderReact({
      messageBarUI()
    })
    
    return(user_session)
  })
}

# Define the UI for the firstPage module
firstPageUI <- function(id) {
  ns <- NS(id)
  div(
    id = id,
    DefaultButton.shinyInput(ns("showDialog"), text = "Open dialog"),
    reactOutput(ns("reactDialog"))
  )
}

# Define the server logic for the firstPage module
firstPageServer <- function(id, user_session) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    isDialogOpen <- reactiveVal(FALSE)
    output$reactDialog <- renderReact({
      dialogContentProps <- list(
        type = 0,
        title = "Missing Subject",
        closeButtonAriaLabel = "Close",
        subText = "Do you want to send this message without a subject?"
      )
      Dialog(
        hidden = !isDialogOpen(),
        onDismiss = JS(paste0(
          "function() {",
          "  Shiny.setInputValue('", ns("hideDialog"),"', Math.random());",
          "}"
        )),
        dialogContentProps = dialogContentProps,
        modalProps = list()
      )
    })
    
    observeEvent(input$showDialog, isDialogOpen(TRUE))
    observeEvent(input$hideDialog, isDialogOpen(FALSE))
  })
}

# Main UI
ui <- fluentPage(
  div(
    class = "grid-container",
    div(class = "main", reactOutput("main"))
  )
)

# Main server logic
server <- function(input, output, session) {
  user_session <- reactiveValues(
    logged = FALSE, page_name = "login"
  )
  
  is_login_page <- reactive({
    user_session$page_name == "login"
  })
  
  output$main <- renderReact({
    if (is_login_page()) {
      loginPageUI("login")
    } else {
      firstPageUI("firstPage")
    }
  })
  
  user_session <- loginPageServer("login", user_session)
  firstPageServer("firstPage", user_session)
}

# Run the application
shinyApp(ui, server)

Bug description

In the above code, we expect the Dialog should pop out a Modal window when user clicked the Open dialog button, but it failed to render in html

in the browser console,

After few rounds of trial-and-error, we found the loginPageUI div structure triggered this bug, but the underlying issues remained unknown. Please see below for our current workaround.

Expected behavior

As mentioned, the Dialog in firstPageUI module should works as normal.

We found a workaround for this issue, we can replace the loginPageUI with following code:

# Define the UI for the login module
loginPageUI <- function(id) {
  ns <- NS(id)
  div(
    id = id,
    div(
      class = "login-box",
      PrimaryButton.shinyInput(ns("login_btn"), text = "Sign in")
    ),
    div(reactOutput(ns("messageBar"))) # workaround is wrapping reactOutput with div
  )
}

Although this workaround is good, but we hope the team can fix this issue, as it is frustrated and very tricky for newcomers and this may blocked them to use this amazing package!

Comments

No response