Multiple verticalTabsetPanels don't work with modules / renderUI approach

[eblondel]

Hello,

I've a shiny app structured in modules, and in each module the verticalTabsetPanel is used. Its use and display is conditioned on file upload and other data processing status handled in reactives, so we use the widget in combination with renderUI. With this approach, it appears that a 1st verticalTabsetPanel works, but any additional verticalTabsetPanel handled doesn't work properly. It is displayed, but vertical tabs are not clickable and their content is not shown.

For the sake of testing in this issue, I could reproduced this behavior in the below shiny app:

  library(shiny)
  library(shinydashboard)
  library(shinyWidgets)
  library(shinyjs)
  
  #modules
  #-------------
  #module a - server
  module_a_server <- function(input, output, session, parent.session){
    ns <- session$ns
    output$vertical_a <- renderUI({
      
      verticalTabsetPanel(
        id = "A",
        verticalTabPanel(
          title = "Title A 1", icon = icon("home", "fa-2x"),
          "Content panel A 1"
        ),
        verticalTabPanel(
          title = "Title A 2", icon = icon("map", "fa-2x"),
          "Content panel A 2"
        ),
        verticalTabPanel(
          title = "Title A 3", icon = icon("rocket", "fa-2x"),
          "Content panel A 3"
        )
      )

    })
  }
  
  #module a - ui
  module_a_ui <- function(id){
    ns <- NS(id)
    tabItem(tabName = "item_a",
            uiOutput(ns("vertical_a"))
    )
  }
  
  #module b - server
  module_b_server <- function(input, output, session, parent.session){
    ns <- session$ns
    output$vertical_b <- renderUI({
      
        verticalTabsetPanel(
          id = "B",
          verticalTabPanel(
            title = "Title B 1", icon = icon("home", "fa-2x"),
            "Content panel B 1"
          ),
          verticalTabPanel(
            title = "Title B 2", icon = icon("map", "fa-2x"),
            "Content panel B 2"
          ),
          verticalTabPanel(
            title = "Title B 3", icon = icon("rocket", "fa-2x"),
            "Content panel B 3"
          )
        )

    })
  }
  
  #module b - ui
  module_b_ui <- function(id){
    ns <- NS(id)
    tabItem(tabName = "item_b",
      uiOutput(ns("vertical_b"))
    )
  }
  
  #main
 #-------------
  #main ui
  ui <- dashboardPage(
    dashboardHeader(
      title = tags$div(
        tags$span("Test dashboard", style = "font-size:80%;")
      ),
      titleWidth = 250
    ),
    dashboardSidebar(
      useShinyjs(),
      width = 250,
      sidebarMenu(
        menuItem("tab for vertical tab A", tabName = "item_a", icon = icon("ship")),
        menuItem("tab for vertical tab B", tabName = "item_b", icon = icon("umbrella-beach"))
      )
    ),
    dashboardBody(
      useShinyjs(),
      tabItems(
        module_a_ui("module_a"),
        module_b_ui("module_b")
      )
    )
  )
  
  #main server
  server <- function(input, output, session) {
      callModule(module_a_server, "module_a", parent.session = session)
      callModule(module_b_server, "module_b", parent.session = session)
  }
  
  shinyApp(ui, server)

In the resulting shiny, we then have the vertical tabset panel of module A functional, but the one from module B is not working. The UI is displayed well but tabs are not clickable.

Thanks in advance if you could look at it,

Best
Emmanuel

[pvictor]

Thanks for the example 👍. It should be fixed if you re-install from GitHub.

Victor

[eblondel]

Wow, many thanks @pvictor for this support :-), super fast!
I confirm it works

[pvictor]

Y'a pas de quoi ;)

I close the issue, let me know if you have any problems