Dropdown functionality of shinyWidgets::pickerInput inside bslib::page_navbar does not work

I have a small reprex of this issue:

# R v4.2.3
# RStudio Pro v2023.06.0
library(shiny) # v1.7.2
library(bslib) # v0.5.0
library(shinyWidgets) # v0.7.6

page_navbar(
    header = pickerInput('pickId', choices = month.abb),
    title = 'reprex',
    nav('tab 1', 'content 1'),
    nav('tab 2', 'content 2')
)

The ui will appear fine, but the picker input is greyed out and the drop down will not pop up.

It also does not work if the pickerInput is placed somewhere else in the UI, for example:

page_navbar(
    title = 'reprex',
    nav_panel('tab 1', 'content 1'),
    nav_panel('tab 2', pickerInput('pickId', choices = month.abb))
)

Compare this to a similar example:

page_navbar(
    header = selectInput('selectId', 'label', choices = month.abb),
    title = 'reprex',
    nav_panel('tab 1', 'content 1'),
    nav_panel('tab 2', selectInput('selectId2', 'label', choices = month.abb))
)

Which works without issues.

Specifically what technical issue is causing this? How can I make this work? The accepted answer MUST use pickerInput.

Updated answer, May 2024

Since this question was mentioned in a recent one and there were some changes since the original answer was written, I update this answer. There now is a solution which also works for bootstrap 5.

While the minimal example which was given by OP in the question outside of shiny seems to work since bslib 0.6.0, there still seems to be a problem with bootstrap 5 and pickerInput inside a shiny app (although e.g. #535 was closed in the meantime), at least if the pickerInput is supplied in header in page_navbar().

The reason apparently is that the pickerInput in such a case gets constructed with attribute data-toggle = "dropdown", whereas in bootstrap 5 one has to use data-bs-toggle = "dropdown". Hence, a solution can be obtained if we change this attribute, e.g. by using htmltools::tagQuery:

library(shiny) # ‘1.8.1.1’
library(bslib) # ‘0.7.0’
library(shinyWidgets) # ‘0.8.6’

ui <- fluidPage(
  page_navbar(
    header = htmltools::tagQuery(pickerInput('pickId', choices = month.abb))$
      find(".btn")$
      removeAttrs("data-toggle")$
      addAttrs(`data-bs-toggle` = "dropdown")$
      allTags(),
    title = 'reprex',
    nav_panel('tab 1', 'content 1'),
    nav_panel('tab 2', 'content 2')
  )
)

shinyApp(ui, \(...) {})

Original answer, July 2023

The problem may occur due to a compatibility issue between pickerInput() and bslib (see also this open issue on GitHub).

However, what seems to let the pickerInput() work is switching to a theme which relies on another BootsTrap version.

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

page_navbar(
    theme = bs_theme(version = 3, bootswatch = "default"),
    header = pickerInput('pickId', choices = month.abb),
    title = 'reprex',
    nav_panel('tab 1', 'content 1'),
    nav_panel('tab 2', 'content 2')
)