I’m using bootstrap 5.0 and bslib(4.0). Otherwise some pickerInputs will not be working.This is to fix this problem: Dropdown functionality of shinyWidgets::pickerInput inside bslib::page_navbar does not work

However I’m running into trouble.

When the liveSearch option is enabled in a pickerInput, pressing the ESCAPE button does not close the search dropdown. The browser console shows the following Bootstrap-related JavaScript error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘focus’)
at HTMLDivElement.dataApiKeydownHandler (dropdown.js:470:7)
at HTMLDocument.n (event-handler.js:120:21)

I tried changing the bootstrap version but to no success, it ruins other parts of my application. Can I overwrite/errorcatch the error given by bootstrap and run custom JS to still close it using the escape button? Or are there any other solutions?

Here is a simple example:

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

ui <- fluidPage(
  theme = bslib::bs_theme(version = 4),
  tags$head(
    # Add the bootstrap here to change to bootstrap 5
    tags$link(
      rel = "stylesheet",
      type = "text/css",
      id = "bootstrapCSS",
      href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    ),
    tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js")
  ),
  titlePanel("PickerInput Example with liveSearch Option"),
  
  sidebarLayout(
    sidebarPanel(
      pickerInput(
        inputId = "picker1",
        label = "Picker Input without liveSearch:",
        choices = c("Option 1", "Option 2", "Option 3", "Option 4"),
        options = pickerOptions(liveSearch = FALSE)
      ),
      
      pickerInput(
        inputId = "picker2",
        label = NULL,
        choices = c("Option A", "Option B", "Option C", "Option D"),
        options = pickerOptions(
          liveSearch = TRUE,
          actionsBox = TRUE,
          selectAllText = "Selecteer alles",
          deselectAllText = "Wis selecties"
        ),
        multiple = TRUE
      )
    ),
    
    mainPanel(
      verbatimTextOutput("selection1"),
      verbatimTextOutput("selection2")
    )
  )
)

server <- function(input, output, session) {
  output$selection1 <- renderPrint({
    paste("You selected:", input$picker1)
  })
  
  output$selection2 <- renderPrint({
    paste("You selected:", input$picker2)
  })
}

shinyApp(ui = ui, server = server)

I would hope that it just closes using the escape button.