bslib中nav_select选中nav_menu内标签后下拉菜单无法关闭的问题咨询

问题现象 #

使用nav_select()从服务器端选中嵌套在nav_menu内的标签时，页面成功切换到目标标签内容，但对应的nav_menu下拉列表会保持展开状态，点击页面其他区域无法关闭该下拉菜单，仅能通过再次点击nav_menu按钮收起。

复现代码 #

library(shiny)
library(bslib)
library(rlang)
library(shinyjs)

nav_items <- function(prefix) {
  list(
    nav("a", tagList(
      paste(prefix, ": tab a content"),
      actionButton(inputId = "go_to_tab_c", label = "Go to tab C")
    )),
    nav("b", paste(prefix, ": tab b content")),
    nav_item(
      tags$a(icon("github"), "Shiny", href = "https://github.com/rstudio/shiny", target = "_blank")
    ),
    nav_spacer(),
    nav_menu(
      value = "ya",
      title = "Other links",
      align = "right",
      nav("c", paste(prefix, ": tab c content")),
      nav_item(
        tags$a(
          icon("r-project"),
          "RStudio",
          href = "https://rstudio.com",
          target = "_blank"
        )
      )
    )
  )
}

ui <- page_fluid(
  shinyjs::useShinyjs(),
  page_navbar(
    id = "main_nav",
    title = "Page",
    bg = "#0062cc",
    !!!nav_items(prefix = "page_navbar")
  )
)

server <- function(input, output, session) {
  observeEvent(input$go_to_tab_c, {
    nav_select(id = "main_nav", selected = "c")
  })
}

shinyApp(ui, server)

解决方法 #

利用shinyjs执行JavaScript代码，在调用nav_select()后手动关闭对应的nav_menu下拉菜单。修改server部分代码如下：

server <- function(input, output, session) {
  observeEvent(input$go_to_tab_c, {
    nav_select(id = "main_nav", selected = "c")
    # 精准定位目标nav_menu并关闭下拉菜单
    shinyjs::runjs("
      // 找到value为'ya'的nav_menu元素
      const navMenu = document.querySelector('[data-value=\"ya\"]');
      if (navMenu) {
        // 移除父元素的show类以收起下拉
        navMenu.parentElement.classList.remove('show');
        // 移除下拉菜单的show类
        const dropdownMenu = navMenu.nextElementSibling;
        if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
          dropdownMenu.classList.remove('show');
        }
      }
    ")
  })
}

说明 #

这个问题属于bslib组件交互的小瑕疵，nav_select()仅处理了标签切换逻辑，未同步更新nav_menu的展开状态。通过手动操作DOM元素移除Bootstrap下拉菜单的show类，可以确保下拉菜单在标签切换后自动收起，符合预期交互行为。

内容的提问来源于stack exchange，提问作者teofil