SelectizeInput移除重添选项后显示激活状态的修复需求

当使用Selectize的remove_button插件时，移除已选中的选项后重新添加该选项，会出现该选项以蓝色激活状态显示、其他已选选项为灰色的样式不一致问题，需要将所有已选选项统一设置为灰色。

复现代码 #

library(shiny)

ui <- fluidPage(
  selectizeInput("my_selectize", "Select one",
              choices = c("One", "Two", "Three"),
              multiple = T,
              options = list('plugins' = list('remove_button'))
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

解决方案 #

方案一：自定义CSS强制覆盖样式

默认Bootstrap样式优先级较高，通过更具体的选择器结合!important强制统一已选选项的样式，消除激活状态的蓝色高亮：

library(shiny)

ui <- fluidPage(
  tags$style(HTML("
    /* 统一所有已选项目的背景、文字和边框颜色 */
    .selectize-control.multi .selectize-input > div.item {
      background-color: #e9ecef !important;
      color: #495057 !important;
      border-color: #ced4da !important;
    }
    /* 移除激活状态的特殊样式 */
    .selectize-control.multi .selectize-input > div.item.active {
      background-color: #e9ecef !important;
      color: #495057 !important;
      border-color: #ced4da !important;
    }
  ")),
  selectizeInput("my_selectize", "Select one",
              choices = c("One", "Two", "Three"),
              multiple = T,
              options = list('plugins' = list('remove_button'))
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

方案二：通过Selectize JS API清除激活状态

借助Selectize的初始化钩子，监听选项的添加和移除事件，从根源上清除激活状态标记，避免样式异常：

library(shiny)

ui <- fluidPage(
  selectizeInput("my_selectize", "Select one",
              choices = c("One", "Two", "Three"),
              multiple = T,
              options = list(
                'plugins' = list('remove_button'),
                onInitialize = I("function() {
                  var self = this;
                  // 移除选项时清除下拉列表中对应项的激活状态
                  self.on('item_remove', function(value) {
                    const option = self.$dropdown.find(`[data-value=\"${value}\"]`);
                    option && option.removeClass('active');
                  });
                  // 添加选项时移除已选项目的激活类
                  self.on('item_add', function(value) {
                    const item = self.$input.find(`[data-value=\"${value}\"]`);
                    item && item.removeClass('active');
                  });
                }")
              )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

说明 #

• 方案一操作简单，直接通过CSS统一样式，适合快速解决问题；
• 方案二从交互逻辑层面修正状态，避免样式依赖异常，更符合前端规范。

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