navbarMenu 内闪亮的 navbarPage 选项卡保持突出显示并且无法再次选择

Question

因此，我正在使用 navbarPage UI 构建一个闪亮的应用程序。我在 navbarMenu 的 tabPanel 中使用了 tabsetPanel，这里我有奇怪的行为。

一切正常加载，工作正常，除了在选择 navbarMenu 内的第二个选项卡后，它保持突出显示并且无法再次选择。

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

ui <- 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")
    )
  )

server <- function(input, output) {}

shinyApp(ui, server)

我不确定我是否严重遗漏了什么。它没有为其他 navbarMenu 复制，所以我认为这与我使用嵌套在 navbarMenu 中的标签集有关。

如果是这样，还有什么方法可以实现此输入侧边栏，其中有 2 个不同的选项卡用于 2 组不同的输入，用于将在页面右侧显示的绘图输出？

Answer 1

这似乎是一个错误。如果你改变 navbarMenu 的顺序（即任务然后是情节），最后一项也会发生同样的事情。这似乎与 Shiny 在页面加载时如何确定哪个是活动选项卡有关。

似乎最终无法从菜单的最后一项中删除“活动”class。如果您通过检查页面手动删除它，它会在以后正常工作。

不确定它为什么重要，但是当应用程序首次加载时，选择的默认选项卡底层 HTML 锚元素（用于“情节”>“维持和平活动”的元素）具有 class“活跃dropdown-item”。而当您开始选择其他菜单项时，它们会显示 class“dropdown-item 活动”。可能与使选项卡可见的 CSS 顺序有关。

解决方法是将 tabPanel 作为第一个元素而不是菜单：

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>...

navbarMenu 内闪亮的 navbarPage 选项卡保持突出显示并且无法再次选择

Shiny navbarPage tab inside navbarMenu stays highlighted and cant be selected again

tabs

r

shiny