如何解决shinydashboard侧边栏pickerInput选项移出鼠标时被截断的问题？

在R语言的shinydashboard sidebarMenu中添加shinywidgets::pickerInput组件后，出现以下异常：

• 当pickerInput展开且鼠标悬停在组件上时，可正常查看全部选项；
• 鼠标移至sidebarMenu外（侧边栏下方或主内容区）时，下拉选项被截断，仅能看到前2个选项。

已知问题源于选项超出sidebarMenu区域，但该场景下无需截断显示，希望实现以下任一效果：

1. 无论鼠标位置如何，下拉选项始终完整显示；
2. 鼠标移出pickerInput组件时自动关闭下拉菜单。

更新1：尝试添加pickerOptions(size = 5)，尽管文档说明“菜单会显示指定数量的选项，即使下拉框被截断”，但未解决鼠标移出时的截断问题。

更新2：可复现示例代码：

library(shiny)
library(shinydashboard)
library(shinyWidgets)

# Helper function 
convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
    mi$attribs$class=NULL
  }
  mi
}


# Define UI
ui <- dashboardPage(
  dashboardHeader(title = "Demo"),
  dashboardSidebar(
    sidebarMenu(
      convertMenuItem(
        menuItem(text = "Option1", 
                 tabName = "opt1",
                 shinyWidgets::pickerInput(inputId = "picker",
                                           label = "Select:",
                                           choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                           selected = c(""),
                                           multiple = TRUE,
                                           options = list(`actions-box` = TRUE, 
                                                          `dropdownAlignRight` = TRUE,
                                                          `dropupAuto` = TRUE))),
        tabName = "opt1-outer"),
      menuItem("Option2", tabName = "opt2"),
      menuItem("Option3", tabName = "opt3")
    )
  ),
  dashboardBody(
  )
)
# Define server logic
server <- function(input, output) {
  
}

# Run the application
shinyApp(ui = ui, server = server)

问题演示：

解决方案 #

方案1：取消父容器裁剪，让下拉菜单完整显示 #

问题根源是shinydashboard的侧边栏菜单容器默认设置了overflow: hidden，导致下拉菜单超出部分被截断。通过自定义CSS修改该属性，并提升下拉菜单的层级，确保它能显示在其他内容上方：

在dashboardBody中添加以下代码：

tags$style(HTML("
  /* 取消侧边栏菜单的溢出隐藏限制 */
  .sidebar-menu {
    overflow: visible !important;
  }
  /* 确保picker下拉菜单层级高于其他页面元素 */
  .bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
    overflow-y: auto;
  }
"))

方案2：鼠标移出时自动关闭下拉菜单 #

通过JavaScript监听鼠标离开事件，当鼠标移出pickerInput的下拉区域时，触发菜单关闭动作：

在dashboardBody中添加以下代码：

tags$script(HTML("
  $(document).on('shown.bs.dropdown', '.bootstrap-select', function() {
    var $dropdown = $(this).find('.dropdown-menu');
    // 监听鼠标离开下拉菜单的事件，触发关闭
    $dropdown.on('mouseleave', function() {
      $(this).parent().removeClass('open');
    });
  });
"))

完整修改代码示例 #

library(shiny)
library(shinydashboard)
library(shinyWidgets)

convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
    mi$attribs$class=NULL
  }
  mi
}

ui <- dashboardPage(
  dashboardHeader(title = "Demo"),
  dashboardSidebar(
    sidebarMenu(
      convertMenuItem(
        menuItem(text = "Option1", 
                 tabName = "opt1",
                 shinyWidgets::pickerInput(inputId = "picker",
                                           label = "Select:",
                                           choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                           selected = c(""),
                                           multiple = TRUE,
                                           options = list(`actions-box` = TRUE, 
                                                          `dropdownAlignRight` = TRUE,
                                                          `dropupAuto` = TRUE))),
        tabName = "opt1-outer"),
      menuItem("Option2", tabName = "opt2"),
      menuItem("Option3", tabName = "opt3")
    )
  ),
  dashboardBody(
    # 方案1：取消裁剪的CSS（可单独使用）
    tags$style(HTML("
      .sidebar-menu {
        overflow: visible !important;
      }
      .bootstrap-select .dropdown-menu {
        z-index: 9999 !important;
        overflow-y: auto;
      }
    ")),
    # 方案2：鼠标移出关闭的JS（可单独使用，也可与方案1同时启用）
    tags$script(HTML("
      $(document).on('shown.bs.dropdown', '.bootstrap-select', function() {
        var $dropdown = $(this).find('.dropdown-menu');
        $dropdown.on('mouseleave', function() {
          $(this).parent().removeClass('open');
        });
      });
    "))
  )
)

server <- function(input, output) {
  
}

shinyApp(ui = ui, server = server)

效果说明 #

• 方案1适合需要用户在菜单外操作时仍保持下拉框展开的场景，直接解决截断问题；
• 方案2适合不需要长时间展开下拉框的场景，避免菜单遮挡其他内容；
• 两个方案可单独使用，也可同时启用。

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