visNetwork not displaying in panel div

Question

I have started to use shinyLP to make html elements and also make network diagrams using visNetwork. I noticed that visNetwork displays fine when placed in either a well panel or no panel at all. However, it does not display when placed in a panel div, either with shinyLP or through raw HTML. Just to be brief, I am only showing the code differences between not being in a panel and being in a panel div. Does anyone know of a way to make visNetwork appear in this specific container type? I want to use this container type because I want to keep my CSS the way it is and not change things just for this one container. Anyone know the cause of this issue?

This works when visNetworkOutput is not in a panel

library(shinyLP)
library(visNetwork)

ui <- fluidPage(

visNetworkOutput("network")

)

server <- function(input, output) {

    output$network <- renderVisNetwork({
    # minimal example
        nodes <- data.frame(id = 1:3)
        edges <- data.frame(from = c(1,2), to = c(1,3))

        visNetwork(nodes, edges)
    })
}

shinyApp(ui, server)

This fails to display when visNetworkOutput is in a panel

ui <- fluidPage(

    panel_div("default", "", visNetworkOutput("network"))

)

server <- function(input, output) {

    output$network <- renderVisNetwork({
        # minimal example
        nodes <- data.frame(id = 1:3)
        edges <- data.frame(from = c(1,2), to = c(1,3))

        visNetwork(nodes, edges)
    })
}

shinyApp(ui, server)

Answer 1

It is a bug in shinyJS version 1.1.0. I found a (awkward) workaround and posted it as a bug in htmlwidgets and Joe Cheng saw it and give me a fix it in like 10 minutes. Awesome...

Here is the code with a better workaround (a new definition of pandel_div):

library(shiny)
library(shinyLP)
library(visNetwork)

# override the currently broken definition in shinyLP version 1.1.0
panel_div <- function(class_type, panel_title, content) {
  div(class = sprintf("panel panel-%s", class_type),
      div(class = "panel-heading",
          h3(class = "panel-title", panel_title)
      ),
      div(class = "panel-body", content)
  )
}

ui <- fluidPage(
  panel_div("default", "panel1",visNetworkOutput("network")  )
)

server <- function(input, output) {

  output$network <- renderVisNetwork({ 
    # minimal network
    nodes <- data.frame(id = 1:3)
    edges <- data.frame(from = c(1,2), to = c(1,3))
    visNetwork(nodes,edges) 
  })

}
shinyApp(ui, server)

And this is what that looks like:

update: Tried with another htmlwidget package (sigma) and got the same behavior. So filing this as an htmlwidget bug: panel_div htmlwidget issue

update: JC identified it as a shinyJS bug. Changed my solution above to reflect his suggestion.