Utilizing Popover (shinybs) within InsertUI function

Question

I'm having issues with using the popover function in my Shiny app when I'm using insertUI. See my code below.

library(shinyBS)
library(shiny)

#ui----
ui = basicPage(
  actionButton("show", "Create a New Analysis")
)

#server----    
server = function(input, output, session) {

  #Show modal when button is clicked.
  observeEvent(input$show, {
    showModal(dataModal())
  })

  #dataModal----    
  #The main modal dialog function. Sets the initial buttons shown on the dialog.
  dataModal <- function() {
    modalDialog(
      h2("Analysis Setup", align = "center"),
      h4("Choose a Setting of Care:", align = "center"),

      #Level0----
      #Inpatient button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(actionButton("Inpatientz", "Inpatient", icon("user-md")),
                 "Inpatient",
                 "Dialogue 1.")),

      #Emergency button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(bsButton("Emergencyz", HTML("Emergency <br> Department"), icon("ambulance"), style = "default", size = "default"),
                 "Emergency",
                 "Dialogue 2.")),

      #Ambulatory button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.          
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(bsButton("Ambulatoryz", HTML("Ambulatory <br> Surgery"), icon("medkit"), style = "default", size = "default"),
                 "Ambulatory",
                 "Dialogue 3.")),

      tags$div(id = 'placeholder'), 
      footer = tagList(
        modalButton("Cancel"),
        actionButton("ok", "OK")
      ),
      #easyClose is an argument which allows the user to click outside the
      #dialog window or press the escape key to close the dialog window.
      easyClose = TRUE
          )
  }
  #Level1----     
  observeEvent(input$Inpatientz, {

    #Adds Descriptive Statistics button with popover.
    insertUI(selector = '#placeholder',
             ui = popify(bsButton("Descriptivez", "Descriptive Statistics", style = "default", size = "default"),
                             "Descriptive Statistics", "Quote 1"))
  }) 

  observeEvent(input$Emergencyz, {

    #Adds Trends button with popover.
    insertUI(selector = '#placeholder',
             ui = popify(bsButton("Trendsz", "Trends", style = "default", size = "default"),
                                      "Trends", "Quote 2"))

  })

    observeEvent(input$Ambulatoryz, {

      #Adds Rank button with popover.
      insertUI(selector = '#placeholder',
               ui = popify(bsButton("Rankz", "Rank", style = "default", size = "default"),
                               "Rank", "Quote 3"))

    })



  #Close Modal
  observeEvent(input$ok, {
    removeModal()
  })
}

shinyApp(ui, server)

With this code, my initial output to the modal window with Level0 bsbuttons (Inpatient, Emergency, and Ambulatory) successfully shows the popover. However, the Level1 buttons (Descriptive Statistics, Trends, and Rank) that are reactively created in response to the Level0 buttons do not show any popover. I've looked through the bsbutton documentation with no success. What should I do?

Answer 1

There are some cool javascript/web browser things going on in the background. I got a solution to work using addPopover while adding immediate = TRUE to the insertUI function (https://shiny.rstudio.com/reference/shiny/1.0.0/insertUI.html), and removing the popify function (no longer required).

My code as follows:

library(shinyBS)
library(shiny)

#ui----
ui = basicPage(
  actionButton("show", "Create a New Analysis")
)

#server----    
server = function(input, output, session) {

  #Show modal when button is clicked.
  observeEvent(input$show, {
    showModal(dataModal())
  })

  #dataModal----    
  #The main modal dialog function. Sets the initial buttons shown on the dialog.
  dataModal <- function() {
    modalDialog(
      h2("Analysis Setup", align = "center"),
      h4("Choose a Setting of Care:", align = "center"),

      #Level0----
      #Inpatient button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(actionButton("Inpatientz", "Inpatient", icon("user-md")),
                 "Inpatient",
                 "Dialogue 1.")),

      #Emergency button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(bsButton("Emergencyz", HTML("Emergency <br> Department"), icon("ambulance"), style = "default", size = "default"),
                 "Emergency",
                 "Dialogue 2.")),

      #Ambulatory button. The HTML function (i.e. div, style) is used to evenly space
      #the buttons in the dialog window.          
      div(style="display:inline-block;width:32%;text-align: center;",
          popify(bsButton("Ambulatoryz", HTML("Ambulatory <br> Surgery"), icon("medkit"), style = "default", size = "default"),
                 "Ambulatory",
                 "Dialogue 3.")),

      tags$div(id = 'placeholder'), 
      footer = tagList(
        modalButton("Cancel"),
        actionButton("ok", "OK")
      ),
      #easyClose is an argument which allows the user to click outside the
      #dialog window or press the escape key to close the dialog window.
      easyClose = TRUE
    )
  }
  #Level1----     
  observeEvent(input$Inpatientz, {

    #Adds Descriptive Statistics button with popover.
    insertUI(selector = '#placeholder',
             ui = bsButton("Descriptivez", "Descriptive Statistics", style = "default", size = "default"), immediate = TRUE
                         )
    addPopover(session, "Descriptivez", "Descriptive Statistics", "Quote 1")
  }) 

  observeEvent(input$Emergencyz, {

    #Adds Trends button with popover.
    insertUI(selector = '#placeholder',
             ui = bsButton("Trendsz", "Trends", style = "default", size = "default")
                         ,  immediate = TRUE)
    addPopover(session, "Trendsz", "Trends", "Quote 2")
  })

  observeEvent(input$Ambulatoryz, {

    #Adds Rank button with popover.
    insertUI(selector = '#placeholder',
             ui = bsButton("Rankz", "Rank", style = "default", size = "default"), immediate = TRUE)

    addPopover(session, "Rankz", "Rank", "Quote 3")
  })



  #Close Modal
  observeEvent(input$ok, {
    removeModal()
  })
}

shinyApp(ui, server)