shinyWidgets::pickerInput搭配semantic.dashboard使用异常问题咨询

异常表现 #

• pickerInput 生成的UI视觉输出未呈现预期的下拉菜单样式
• 点击控件时，传入pickerInput的完整选项列表直接在UI中全部展开，且无法关闭

异常效果参考 #

最小复现代码 #

if(interactive()){
  
  ui <- semantic.dashboard::dashboardPage(
    
    header = semantic.dashboard::dashboardHeader(
      color = "blue", 
      title = "Dashboard Test", 
      inverted = TRUE
    ),
    
    sidebar = semantic.dashboard::dashboardSidebar(
      size = "thin", 
      color = "teal",
      semantic.dashboard::sidebarMenu(
        semantic.dashboard::menuItem(
          tabName = "tabID_main", 
          "Main Tab"),
        semantic.dashboard:: menuItem(
          tabName = "tabID_extra", 
          "Extra Tab")
      )
    ),
    
    body = semantic.dashboard::dashboardBody(
      semantic.dashboard::tabItems(
        
        selected = 1,
        
        semantic.dashboard::tabItem(
          tabName = "tabID_main",
          semantic.dashboard::box(
            shiny::h1("Main body"), 
            title = "A b c", 
            width = 16, 
            color = "orange",
            
            shinyWidgets::pickerInput(
              inputId = "ID_One",
              choices = c("Value One","Value Two","Value Three"),
              label = shiny::h5("Value to select"),
              selected = "Value Two",
              width = "fit",
              inline = TRUE),
            
            shiny::verbatimTextOutput(outputId = "res_One")
          )
        ),
        
        semantic.dashboard::tabItem(
          tabName = "tabID_extra",
          shiny::h1("extra")
        )
        
      )
    )
  )
  
  server <- function(input, output, session) {
    output$res_One <- shiny::renderPrint(input$ID_One)
  }
  
  shiny::shinyApp(ui, server)
  
}

运行环境 #

• Windows设备64位 R 3.6.3版本
• R包版本对应checkpoint快照日期2021-05-15
• shinyWidgets 版本：0.6.0
• semantic.dashboard 版本：0.2.0

问题原因 #

semantic.dashboard 基于Fomantic UI框架开发，默认会替换Shiny原生依赖的Bootstrap库。shinyWidgets::pickerInput 是基于Bootstrap生态的bootstrap-select组件实现的，缺少对应依赖的CSS和JS资源时，就会出现样式失效、交互逻辑崩溃的问题。

解决方案 #

方案1：补全Bootstrap依赖（保留pickerInput） #

在semantic.dashboard::dashboardBody()的第一行添加shiny::bootstrapLib()，强制加载Shiny原生Bootstrap依赖即可修复，修改后的body结构示例：

body = semantic.dashboard::dashboardBody(
  # 新增此行补全依赖
  shiny::bootstrapLib(),
  semantic.dashboard::tabItems(
    # 原有业务代码保持不变
    # ...
  )
)

如果加完仍有部分交互异常，可在shiny::bootstrapLib()后追加shinyWidgets::useShinyWidgets()完成shinyWidgets组件的初始化。

方案2：替换为框架原生组件（无依赖冲突） #

如果不想引入额外的Bootstrap依赖，可以直接替换为semantic.dashboard生态自带的下拉选择组件semantic.dashboard::dropdown_input，不存在跨框架样式冲突问题，调用逻辑和pickerInput基本一致。

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