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.
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.
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.
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, \(...) {})