jsTreeR bug and how to use it as an input in shiny

Question

I was trying to create a tree hierarchy input parameter. I know we should be able to do it using jsTreeR package. I have tried first to construct the tree hierarchy like this:

library(jsTreeR)

nodes <- list(
  list(
    text = "RootA",
    type = "root",
    children = list(
      list(
        text = "ChildA1",
        type = "child",
        children= list( list(text = "ChildA12",
                        type = "child"))
      ),
      list(
        text = "ChildA2",
        type = "child"
      )
    )
  ),
  list(
    text = "RootB",
    type = "root",
    children = list(
      list(
        text = "ChildB1",
        type = "child"
      ),
      list(
        text = "ChildB2",
        type = "child"
      )
    )
  )
)

types <- list(
  root = list(
    icon = FALSE
  ),
  child = list(
    icon = FALSE
  )
)

jstree(
  nodes,
  types = types,
  checkboxes = TRUE
)

However there is a bug when I expand the hierarchy sometimes the first child overlap with the second child below as such:

How to solve this?

Secondly I want to use this tree as an input but in a dropdown in shiny app. How to do this?

Answer 1

Here is a working example of what I was trying to do. The bug is not seen with shiny:

library(shiny)
library(jsTreeR)

ui <- fluidPage(
  dropdownButton(
    inputId = "mydropdown",
    label = "HS",
    icon = icon("sliders"),
    status = "primary",
    circle = FALSE,
    jstreeOutput("mytree")

  )
  
)

server <- function(input, output, session) {
  output$mytree <- renderJstree({
    
    nodes <- list(
      list(
        text = "RootA",
        type = "root",
        children = list(
          list(
            text = "ChildA1",
            type = "child",
            children= list( list(text = "ChildA12",
                                 type = "child"))
          ),
          list(
            text = "ChildA2",
            type = "child"
          )
        )
      ),
      list(
        text = "RootB",
        type = "root",
        children = list(
          list(
            text = "ChildB1",
            type = "child"
          ),
          list(
            text = "ChildB2",
            type = "child"
          )
        )
      )
    )
    
    types <- list(
      root = list(
        icon = FALSE
      ),
      child = list(
        icon = FALSE
      )
    )
    # create the tree widget
    
    jstree(
      nodes,
      types = types,
      checkboxes = TRUE
    )
  })

}

shinyApp(ui, server)