So, I'm building a shiny app using a navbarPage UI. I use tabsetPanel inside the tabPanels of navbarMenu, and here i have weird behaviour.

Everything loads fine, and works fine, except that after selecting the second tab inside the navbarMenu, it stays highlighted and cant be selected again.

require(shiny)
require(bslib)
require(htmltools)

ui <- function(req) {
  navbarPage(
    theme = bs_theme(version = 5),
    header = list(assets()),
    title = "Hello Stack",
    id = "main-menu",
    navbarMenu(
      "Plots",
      tabPanel(
        "Peacekeeping Activities",
        tabsetPanel(
          id = "type-act",
          type = "pills",
          tabPanel(
            "Aggregated",
            "Here come modular inputs to select and group missions",
            sliderInput(
              "act_years",
              "Timerange",
              min = as.Date("1989", format = "%Y"),
              max = as.Date("2018", format = "%Y"),
              value = c(as.Date("1989", format = "%Y"), as.Date("2018", format = "%Y")),
              timeFormat = "%Y"
            ),
            textInput("example", "Group 1"),
            textInput("example2", "Group 2")
          ),
          tabPanel(
            "Mission",
            "Mission inputs where you can select a specific mission and",
            textInput("mission", "Select missions")
          )
        )
      ),
      tabPanel(
        "Engagement Categories",
        tabsetPanel(
          id = "type-ec",
          type = "tabs",
          tabPanel(
            "Aggregated",
            "Here come modular inputs to select and group missions",
            sliderInput(
              "ec_years",
              "Timerange",
              min = as.Date("1989", format = "%Y"),
              max = as.Date("2018", format = "%Y"),
              value = c(as.Date("1989", format = "%Y"), as.Date("2018", format = "%Y")),
              timeFormat = "%Y"
            ),
            textInput("examplee23", "Group 1"),
            textInput("examplee2", "Group 2")
          ),
          tabPanel(
            "Mission",
            "Mission inputs where you can select a specific mission and",
            numericInput("mission_num", "Numbers lol", 5)
          )
        )
      )
    ),
    navbarMenu(
      "Missions",
      tabPanel(
        "Mission overview",
        shiny::h3("Here comes overview by continent, timeranges")
      ),
      tabPanel(
        "Data coverage",
        shiny::h3("SG report coverage per mission (maybe: links to UN Docs)")
      ),
      tabPanel(
        "Activity map",
        conditionalPanel(condition = "window.innerWidth < 1000 || window.innerHeight < 720",
                         div(
                           class = "outer",
                           tags$style(type = "text/css", "#map {height: calc(100vh - 110px) !important;}"),
                           leafletOutput("map")
                         ))
      )
    ),
    tabPanel(
      "About",
      shiny::h3("Info about the data, collection, funding, documentation")
    )
  )
}

Im not sure if I am missing something gravely. It is not replicated for the other navbarMenu, so I am thinking that it has to do with me using tabsets nested inside the navbarMenu.

If thats the case, what would be another way to achieve this input sidebar with 2 different tabs for 2 different sets of inputs for the plot output thats going to go on the right side of the page?

CodePudding user response：

This appears to be a bug. If you switch the order of the navbarMenus (i.e. Missions then Plots) the same thing happens in the last item. It appears to be related to how Shiny determines which is the active tab when the page loads.

It seems like it ultimately has trouble removing the "active" class from the last item in the menu. If you manually remove it by inspecting the page, it works fine from then on out.

Not sure why it should matter, but when the app first loads, the default tab selected underlying HTML anchor element (the one for "Plots" > "Peacekeeping Activities") has the class "active dropdown-item". Whereas when you start selecting the other menu items they get the class "dropdown-item active". Could possibly be related to CSS order that makes a tab visible.

A workaround would be to put a tabPanel as the first element instead of a menu:

ui <- function(req) {
  navbarPage(
    theme = bs_theme(version = 5),
    header = "Nothing Here", #list(assets()),
    title = "Hello Stack",
    id = "main-menu",
    tabPanel(
      "Home",
      shiny::h3("Welcome to my app.")
    ),
    navbarMenu(
      "Plots",
...<remaining code>...