如何实现点击外部关闭bslib的popover弹出框？

要实现点击Popover外部区域自动关闭的功能，可通过添加自定义JavaScript代码实现，具体修改如下：

修改后的完整代码 #

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "My dashboard",
  sidebar = "Sidebar",
  "Main content area",
  actionButton(
    "btn",
    "BTN"
  ) |> 
    popover(
      "Popover message",
      title = "Popover title",
      selectInput(
        "test",
        "Test",
        letters[1:3],
        "a"
      ),
      options = list(trigger = "click focus", container = "body")
    ),
  textOutput("text"),
  # 添加自定义JavaScript实现外部点击关闭
  tags$script(HTML("
    $(document).on('click', function(e) {
      // 判断点击目标是否不在popover内部，也不是触发按钮
      if (!$(e.target).closest('.popover').length && !$(e.target).closest('#btn').length) {
        $('.popover').popover('hide');
      }
    });
  "))
)

server <- function(input, output, session){
  output$text <- renderText({
    input$test
  })
}

shinyApp(ui, server)

关键说明 #

• 在popover的配置项中添加container = "body"，确保弹窗挂载到body节点下，避免父元素的事件拦截影响判断逻辑。
• 自定义JS监听全局点击事件：
  • 通过closest()方法判断点击目标是否属于弹窗内部或触发按钮
  • 若都不属于，则调用popover('hide')关闭所有已打开的Popover

这样就能实现类似模态框easyClose = TRUE的效果，点击Popover外部区域时自动关闭弹窗。

内容的提问来源于stack exchange，提问作者user165673