pickerInput 的奇怪行为，如何解决？

Question

我有一个闪亮的应用程序，它使用带有 bootstrap 版本 5 的 bslib 主题和 navbarPage 作为主要 UI 元素。我注意到在这种情况下，shinyWidgets 的 pickerInput 无法正常工作。这是例子：

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)

在结果中，两个 pickerInput 元素呈灰色（在本例中为红色），并且单击它们时下拉列表不会打开。

但是，如果该代码中的第一个 pickerInput （“test1”）未被注释，这一切都会改变。在这种情况下，所有三个 pickerInput 元素都能正常工作。

现在唯一的区别是 navbarPage 元素之外有一个 pickerInput 元素。

请帮我理解这一点。我确实不想要在我的最终应用程序中的 navbarPage 之外使用 pickerInput，但为什么将它放在那里可以解决所有 pickerInput 的问题？我怎样才能解决这个问题而不需要在某个地方放置一个pickerInput？

注意：不幸的是，带有 bootstrap 版本 5 的 bslib 对于我的应用程序的其他部分来说是必需的，我不能简单地将其更改为另一个版本或将其删除。

Answer 1

这是一个兼容性问题，因为

navbarPage()

默认为 Bootstrap 3（加载外部的其他

pickerInput

会否决这一点）。要解决这个问题，请在

theme

:

 中显式定义 

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)
)