解决点击pickerInput分组标题时下拉列表自动关闭的问题

要实现点击分组标题全选/反选组内选项且下拉不关闭，无需额外依赖包，可通过以下两种方案解决：

方案一：前端直接处理选择（推荐） #

直接在JavaScript中完成分组选择逻辑，避免服务器端更新导致的下拉关闭，逻辑更高效：

library(shiny)
library(shinyWidgets)

js <- HTML("
$(document).ready(function() {
  function attachClickHandlers() {
    // 移除旧绑定，避免重复触发
    $('.dropdown-header').off('click.groupSelect');
    
    $('.dropdown-header').on('click.groupSelect', function(evt) {
      // 阻止事件冒泡和默认行为，避免下拉关闭
      evt.stopPropagation();
      evt.preventDefault();
      
      let $header = $(this);
      
      // 获取当前分组下的所有复选框选项
      let $groupOptions = $header.nextUntil('.dropdown-header').find('input[type=\"checkbox\"]');
      
      // 判断当前组是否已全选
      let allChecked = $groupOptions.filter(':checked').length === $groupOptions.length;
      
      // 切换选中状态：全选则反选，未全选则全选
      $groupOptions.prop('checked', !allChecked);
      
      // 通知picker刷新状态，同步到Shiny的input值
      $groupOptions.closest('.bootstrap-select').selectpicker('refresh');
    }).css('cursor', 'pointer'); 
  }

  // 等待picker渲染完成后绑定事件
  function waitForPicker() {
    if ($('.dropdown-header').length > 0) {
      attachClickHandlers();
    } else {
      setTimeout(waitForPicker, 100);
    }
  }

  setTimeout(waitForPicker, 500);

  // 下拉打开时重新绑定事件（处理picker动态渲染的情况）
  $(document).on('shown.bs.dropdown', function() {
    setTimeout(attachClickHandlers, 50);
  });
})
")

choices <- list("A" = c(1, 2, 3, 4, 5), "B" = c(6, 7, 8, 9, 10))

ui <- fluidPage(
  tags$head(tags$script(js)),
  pickerInput("test", choices = choices, multiple = TRUE),
  textOutput("testOutput")
)

server <- function(input, output, session) {
  output$testOutput <- renderText({
    if(length(input$test) > 0) {
      paste("Selected:", paste(input$test, collapse = ", "))
    } else {
      "No selection"
    }
  })
}

shinyApp(ui = ui, server = server)

方案二：修复事件传播 + 服务器端更新后重新打开下拉 #

如果需要保留服务器端的逻辑处理，可通过阻止事件传播+自定义消息重新打开下拉：

library(shiny)
library(shinyWidgets)

js <- HTML("
$(document).ready(function() {
  let clickCounter = 0;
  const $picker = $('#test'); // 缓存picker元素

  function attachClickHandlers() {
    $('.dropdown-header').off('click.groupSelect');
    
    $('.dropdown-header').on('click.groupSelect', function(evt) {
      // 阻止事件冒泡和默认行为，避免下拉关闭
      evt.stopPropagation();
      evt.preventDefault();
      
      let groupName = $(this).find('span').text().trim();
      clickCounter++;
      // 发送分组点击事件给服务器
      Shiny.setInputValue('group_select', groupName + '_' + clickCounter, {priority: 'event'});
    }).css('cursor', 'pointer'); 
  }

  function waitForPicker() {
    if ($('.dropdown-header').length > 0) {
      attachClickHandlers();
    } else {
      setTimeout(waitForPicker, 100);
    }
  }

  setTimeout(waitForPicker, 500);

  $(document).on('shown.bs.dropdown', function() {
    setTimeout(attachClickHandlers, 50);
  });

  // 接收服务器消息，重新打开下拉
  Shiny.addCustomMessageHandler('reopenPicker', function() {
    if ($picker.hasClass('open')) {
      // 先关闭再打开，确保状态正确
      $picker.dropdown('toggle');
      setTimeout(() => $picker.dropdown('toggle'), 10);
    }
  });
})
")

choices <- list("A" = c(1, 2, 3, 4, 5), "B" = c(6, 7, 8, 9, 10))

ui <- fluidPage(
  tags$head(tags$script(js)),
  pickerInput("test", choices = choices, multiple = TRUE),
  textOutput("testOutput")
)

server <- function(input, output, session) {
  output$testOutput <- renderText({
    if(length(input$test) > 0) {
      paste("Selected:", paste(input$test, collapse = ", "))
    } else {
      "No selection"
    }
  })

  observeEvent(input$group_select, {
    req(input$group_select)
    
    group_name <- gsub("_[0-9]+$", "", input$group_select)
    current_selected <- input$test %||% c()
    group_values <- choices[[group_name]]
    
    if (is.null(group_values)) return()
    
    # 切换全选/反选状态
    new_selected <- if (all(group_values %in% current_selected)) {
      setdiff(current_selected, group_values)
    } else {
      unique(c(current_selected, group_values))
    }
    
    updatePickerInput(session, "test", selected = new_selected)
    # 发送消息让前端重新打开下拉
    session$sendCustomMessage("reopenPicker", list())
  })
}

shinyApp(ui = ui, server = server)

关键说明 #

• 核心是通过evt.stopPropagation()和evt.preventDefault()阻止点击分组标题时触发Bootstrap下拉的关闭逻辑。
• 方案一无需服务器端交互，直接前端完成选择同步，体验更流畅；方案二保留服务器端逻辑，适合需要额外处理的场景。

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