pickerInput and bslib with bootstrap version 5 - Deselection does not work if 'maxOptions = 1'

[seb09]

Dear shinyWidgets devs,

I've been using pickerInput() a lot to allow the user to either select exactly one of the possible choices or nothing. I've been doing this by setting multiple = TRUE and options = pickerOptions(maxOptions = 1). However, when using the bslib package with bootstrap 5, this does not work anymore, as it is not possible to deselect a selected choice again.

The attached code works as expected when switching back to bootstrap 4 (i.e. bs_theme(version = 4)) or setting maxOptions = 2.

library(shiny)
library(shinyWidgets)
library(bslib)

ui <- page(
  
  theme = bs_theme(version = 5),
  
  pickerInput(
    inputId  = "picker",
    choices  = c("A", "B", "C"),
    multiple = TRUE,
    options  = pickerOptions(
      maxOptions = 1
    )
  ),
  
  verbatimTextOutput(outputId = "picker_selection")

)

server <- function(input, output) {

  output$picker_selection <- renderPrint(input$picker)
  
}

shinyApp(ui = ui, server = server)

I'm using bslib_0.5.1, shinyWidgets_0.8.0 and shiny_1.7.5 on R 4.3.1.

Is that something that could be handled on your end or do you think this is an bslib issue?

[pvictor]

Hello,

Unfortunately that's a bug in the JavaScript library (reported here) and there's few chances that it'll be fixed.
The only solution I see here is using a workaround with a button to clear selected choices explicitly, using either the allowClear option or the select / deselect all options but hiding the select all one :

library(shiny)
library(shinyWidgets)
library(bslib)

ui <- fluidPage(
  
  theme = bs_theme(version = 5),

  # pickerInput(
  #   inputId  = "picker",
  #   choices  = c("A", "B", "C"),
  #   multiple = TRUE,
  #   options  = pickerOptions(
  #     maxOptions = 1,
  #     allowClear = TRUE
  #   )
  # ),
  
  # OR 
  tags$style(HTML(
    "select[data-max-options=\"1\"] ~ .dropdown-menu .bs-actionsbox .bs-select-all {display: none;}
     select[data-max-options=\"1\"] ~ .dropdown-menu .bs-actionsbox .bs-deselect-all {width: 100%;}"
  )),
  pickerInput(
    inputId  = "picker",
    choices  = c("A", "B", "C"),
    multiple = TRUE,
    options  = pickerOptions(
      maxOptions = 1,
      actionsBox = TRUE,
      deselectAllText = "Clear"
    )
  ),
  
  verbatimTextOutput(outputId = "picker_selection")
  
)

server <- function(input, output) {
  
  output$picker_selection <- renderPrint(input$picker)
  
}

shinyApp(ui = ui, server = server)

Victor

[seb09]

Thanks a lot for looking into this and providing the workarounds 🙂 I like both of them (for now 😉).

Hope this will be fixed in the JavaScript library at some point. That was a really neat feature of the pickerInput.