ijlyttle / bsplus

Shiny and R Markdown addons to Bootstrap 3
http://ijlyttle.github.io/bsplus/
Other
147 stars 23 forks source link

bs_embed_popover does not work with renderUI #73

Open LeonhardBakker opened 4 years ago

LeonhardBakker commented 4 years ago

Hi!

Thank you for this amazing package! I really enjoy working with it :) I can't get bs_embed_popover to work with renderUI, but it works perfectly fine with inputs in the UI. Is it possible to make bs_embed_popover work with renderUI as well?

I have added a reproducible example:

library(shiny) library(bsplus) library(tidyverse)

shinyApp( ui = basicPage( use_bs_popover(), titlePanel("REPREX"), textInput("txt1", "Enter the text to display below:") %>% shinyInput_label_embed( shiny_iconlink() %>% bs_embed_popover( title = "Works", content = "write your message", placement = "right", html = "true" ) ), verbatimTextOutput("placeholder1", placeholder = TRUE), uiOutput("txt2"), verbatimTextOutput("placeholder2", placeholder = TRUE) ), server = function(input, output) { output$placeholder1 <- renderText({input$txt1}) output$placeholder2 <- renderText({input$txt2}) output$txt2 <- renderUI(textInput("txt2", "Enter the text to display below:") %>% shinyInput_label_embed( shiny_iconlink() %>% bs_embed_popover( title = "Does not work", content = "write your message", placement = "right", html = "true" ) ) ) } )

ijlyttle commented 4 years ago

Popovers have to be initialized - this is done by use_bs_popover(). The problem here is that the server is adding another popover after the popovers have been initialized.

I'll have to think about this a bit.

This is the JS code that has to run:

$(function () {
  $('[data-toggle="popover"]').popover()
})

https://getbootstrap.com/docs/3.3/javascript/#popovers

ijlyttle commented 4 years ago

Here's a workaround:

library(shiny)
library(bsplus)
library(tidyverse)

shinyApp(
  ui = basicPage(
    use_bs_popover(),
    titlePanel("REPREX"),
    textInput("txt1", "Enter the text to display below:") %>%
      shinyInput_label_embed(
        shiny_iconlink() %>%
          bs_embed_popover(
            title = "Works",
            content = "write your message",
            placement = "right",
            html = "true"
          )
      ),
    verbatimTextOutput("placeholder1", placeholder = TRUE),
    uiOutput("txt2"),
    verbatimTextOutput("placeholder2", placeholder = TRUE)
  ),
  server = function(input, output) {
    output$placeholder1 <- renderText({input$txt1})
    output$placeholder2 <- renderText({input$txt2})
    output$txt2 <- 
      renderUI(
        tagList(
          textInput("txt2", "Enter the text to display below:") %>%
            shinyInput_label_embed(
              shiny_iconlink() %>%
                bs_embed_popover(
                  title = "Does not work",
                  content = "write your message",
                  placement = "right",
                  html = "true"
                )
            ),
          tags$script("$(function () {$('[data-toggle=\"popover\"]').popover()})")          
        )
      )
  }
)