shiny.semantic grid_template下pickerInput点击无法正常收起问题求助

问题根因 #

该异常由shiny.semantic的Semantic UI布局体系与Bootstrap体系组件混用导致：pickerInput基于Bootstrap开发，你在Semantic UI的grid布局中嵌套了Shiny原生基于Bootstrap实现的shiny::column组件，两类框架的点击事件处理逻辑冲突，导致pickerInput的收起事件被上层Semantic UI的事件拦截，无法正常触发。

解决方案 #

方案1：移除多余的Bootstrap列嵌套（推荐） #

你已经通过grid_template定义了各区域的布局规则，无需额外嵌套shiny::column控制宽度和偏移，直接在grid的每个区域内放置控件即可，修改后的UI代码如下：

ui <- semanticPage(
  grid(
    myGridTemplate,
    search_info1 = tagList(
      tags$div(style = "padding: 0 20px;",
        shinyWidgets::pickerInput(
          inputId  = "picker_year",
          label    = h5("Select Year "),
          choices  = c("2020", "2021"),
          selected = "2020",
          multiple = FALSE,
          options  = list(
            `actions-box` = FALSE,
            size = 2,
            `selected-text-format` = "count > 2"
          )
        )
      )
    ),
    search_info2 = tagList(
      tags$div(style = "padding: 0 20px;",
        shinyWidgets::pickerInput(
          inputId  = "picker_month",
          label    = h5("Select Month"),
          choices  = months_vector,
          selected = months_vector,
          multiple = TRUE,
          options  = list(
            `actions-box` = TRUE,
            size = 4,
            `selected-text-format` = "count > 2"
          )
        )
      )
    ),
    search_info3 = tagList(
      br(),
      br(),
      actionButton(inputId = "apply", label = "Update")
    )
  )
)

如需调整区域内的边距，直接通过style参数设置padding或margin实现即可，避免使用Bootstrap的column相关属性即可彻底避免框架冲突。

方案2：添加自定义JS强制修复事件冲突 #

如果不想修改现有布局结构，直接在semanticPage开头添加一段JS代码阻止事件冒泡即可：

ui <- semanticPage(
  tags$script(HTML("
    $(document).on('click', '.bootstrap-select', function(e) {
      e.stopPropagation();
    });
  ")),
  grid(
    myGridTemplate,
    # 原有search_info1、search_info2、search_info3代码完全保留即可
  )
)

两种方案均可实现pickerInput点击正常展开、再次点击正常收起的效果，方案1从根源规避框架冲突，长期使用稳定性更高，方案2修改工作量更小。

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