Error in init.ts when using library(jsTreeR)

[ismirsehregal]

I've already raised the issue here, however, I'm not sure if in this case shiny or jsTreeR needs to make a move.

When running the following app using the latest CRAN version of library(jsTreeR) (2.5.0) after resizing the browser window this error can be seen in the browser console:

Example app:

library(jsTreeR)
library(shiny)

nodes <- list(
  list(
    text = "Fruits",
    type = "fruit",
    children = list(
      list(
        text = "Apple",
        type = "fruit",
        data = list(
          quantity = 20
        )
      ),
      list(
        text = "Banana",
        type = "fruit",
        data = list(
          quantity = 31
        )
      ),
      list(
        text = "Grapes",
        type = "fruit",
        data = list(
          quantity = 34
        )
      )
    ),
    state = list(
      opened = TRUE
    )
  )
)

grid <- list(
  columns = list(
    list(
      width = 200,
      header = "Product"
    ),
    list(
      width = 150,
      value = "quantity",
      header = "Quantity"
    )
  )
)

ui <-   fluidPage(
  titlePanel("jsTree grid"),
  jstreeOutput("jstree")
)

server <-   function(input, output, session){
  output$jstree <- renderJstree(jstree(nodes, search = TRUE, grid = grid))
}

shinyApp(ui, server)

This is only the case when jstree is provided with the grid parameter (table wrapped around the tree).

@stla identified that the class shiny-bound-output is assigned to the jstree-grid-wrapper div which causes the issue and that removing it prevents the issue.

I'm wondering whether removing the class only is "combating symptoms" and if this should be addressed in shiny (similar to this).

[gadenbuie]

What's interesting is that I see two .shiny-bound-output objects -- or even two htmlwidgets in this example:

document.querySelectorAll(".shiny-bound-output")
// NodeList(2) [...]
document.querySelectorAll(".shiny-bound-output").forEach(el => console.log(`${el.tagName}${el.id ? "#" : ""}${el.id}.${[...el.classList].join('.')}`))
// DIV.jstree-grid-wrapper.jstreer.html-widget.html-widget-output.shiny-report-size.html-fill-item.shiny-bound-output
// DIV#jstree.jstreer.html-widget.html-widget-output.shiny-report-size.html-fill-item.shiny-bound-output.jstree.jstree-1.jstree-grid-cell.jstree-default

The element with #jstree does have the correct binding; it's the .jstree-grid-wrapper that's throwing the error:

$("#jstree").data("shiny-output-binding")
// OutputBindingAdapter2 {el: div#jstree.jstreer.html-widget.html-widget-output.shiny-report-size.html-fill-item.shiny-bound-outp…, binding: OutputBinding2, onResize: ƒ}
$(".jstree-grid-wrapper").data("shiny-output-binding")
// undefined

My first instinct is to look into the jstree initialization code. Maybe you're cloning or re-using an initial element and retaining some classes on the copy that aren't needed?

[ismirsehregal]

@gadenbuie thanks for the hints!

To me the jstree initialization code looks just like the boilerplate.

The class shiny-bound-output seems to be added here, however, so far I don't understand how or where the jstree-grid-wrapper element is enlisted or chosen for binding. I'll keep digging.

[stla]

I've found the reason @gadenbuie - see https://stackoverflow.com/a/77993889/1100107. That's the jsTreeGrid plugin which copies the classes of the tree to the grid.

So I changed the regex to /(^shiny|^jstree(r|-|$))/ in jstreegrid.js, to prevent the classes shiny-bound-output and jstreer to be copied, and the problem has gone.