rshinyshinywidgetsbslibpickerinput

Strange behavior of pickerInput, how to resolve it?


I have a Shiny app which uses a bslib theme with bootstrap version 5 and a navbarPage as the main UI element. I have noticed that pickerInput from shinyWidgets is not working correctly in this case. Here is the example:

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

ui <- fluidPage(
  theme = bs_theme(version = 5),
  
  # Uncommenting the following line makes ALL pickerInputs work
  # pickerInput("test1", "Test1", choices=c("a", "b", "c")),
  
  navbarPage(
    "Navbar title",
    
    pickerInput("test2", "test2", choices=c("a", "b", "c")),
    
    tabPanel(
      "Tab title",
      pickerInput("b", "Test1", choices=c("a", "b", "c"))
    )
  )
)


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

shinyApp(ui, server)

In the result, the two pickerInput elements are greyed out (red in this case) and the dropdown does not open when clicking on them.

Shiny bslib navbarPage with pickerInput elements not working

However, this all changes if the first pickerInput I have in that code ("test1") is uncommented. In that case, all three pickerInput elements work correctly.

Shiny bslib navbarPage with pickerInput elements working

The only difference now is that there is a pickerInput element outside of the navbarPage element.

Please help me make sense of this. I do not want a pickerInput outside of the navbarPage in my final app, but why does putting it there resolve the issue for all pickerInputs? How can I solve this without having to put a pickerInput somewhere?

Note: bslib with bootstrap version 5 is unfortunately necessary for other parts of my app, I cannot simply change this to another version or remove it.


Solution

  • This is a compatibility issue because navbarPage() defaults to Bootstrap 3 (loading the other pickerInput outside overrules this). To solve it with your current approach, explicitly define theme in navbarPage():

    navbarPage(
      "Navbar title",
      
      pickerInput("test2", "test2", choices=c("a", "b", "c")),
      
      tabPanel(
        "Tab title",
        pickerInput("b", "Test1", choices=c("a", "b", "c"))
      ),
      theme = bs_theme(version = 5)
    )
    

    However, I wouldn't recommend to mix things up in such a way. If you have to use Bootstrap 5 and in particular bslib anyways, then it might be better to completely default to bslib, e.g. to use page_fluid, page_navbar instead of their shiny versions. An example would be this:

    library(shiny)
    library(bslib)
    library(shinyWidgets)
    
    ui <- page_fluid(
      page_navbar(
        title = "Navbar title",
        nav_panel(
          "Tab title",
          pickerInput("test1", "Test1", choices = c("a", "b", "c")),
          pickerInput("test2", "Test2", choices = c("a", "b", "c"))
        )
      )
    )
    
    shinyApp(ui, \(...) {})
    

    enter image description here