jsTreeR affects other htmlwidgets' styling

[datatenk]

After switching from shinyTree to jsTreeR, all other htmlwidgets appear to have their styling set to those of jsTree when they are rendered through renderUI.

As exemplified below, a shinyWidgets::radioGroupButtons element is used:

1. when using shinyTree, the following rendering is obtained (desirable):

2. after switching to jsTreeR, the following rendering is obtained (undesirable):

Below is a reprex, firstly using shinyTree, where the renderings are good in both "shinyTree" and "shinyTree uiOutput" tabs:

library(shiny)
library(bslib)
library(shinyWidgets)
library(shinyTree)
library(jsTreeR)

# using shinyTree
nodes_shinyTree<-list(foo=list(bar=list()))

shinyTree_ui<-card(
  shinyTree('shinyTree_tree_ui'),
  radioGroupButtons('rgb1',choices=c('A','B'),size='sm'))

ui_shinyTree<-page_navbar(
  title='shinyTree',
  
  nav_panel(
    title='shinyTree',
    card(
      shinyTree('shinyTree_tree'),
      radioGroupButtons('rgb',choices=c('A','B'),size='sm')
    )
  ),

  nav_panel(
    title='shinyTree uiOutput',
    uiOutput('shinyTree_ui')
  )
  
)

server_shinyTree<-function(input,output,session){
  output$shinyTree_tree<-renderTree(nodes_shinyTree)
  
  output$shinyTree_tree_ui<-renderTree(nodes_shinyTree)
  output$shinyTree_ui<-renderUI(shinyTree_ui)
  
  
}

shinyApp(ui_shinyTree,server_shinyTree)

Same example, now using jsTreeR instead of shinyTree; notice the problem in the "jsTreeR uiOutput" tab:

library(shiny)
library(bslib)
library(shinyWidgets)
library(shinyTree)
library(jsTreeR)


# using jsTreeR
nodes_jsTreeR<-list(list(text='foo',children=list(list(text='bar'))))

jsTreeR_ui<-card(
    jstreeOutput('jstree_tree_ui'),
    radioGroupButtons('rgb1',choices=c('A','B'),size='sm'))


ui_jsTreeR<-page_navbar(
  title='jsTreeR',
  
  nav_panel(
    title='jsTreeR',
    card(
      jstreeOutput('jstree_tree'),
      radioGroupButtons('rgb',choices=c('A','B'),size='sm')
    )
  ),

  nav_panel(
    title='jsTreeR uiOutput',
    uiOutput('jsTreeR_ui')
  )
)

server_jsTreeR<-function(input,output,session){
  output$jstree_tree<-renderJstree(jstree(nodes_jsTreeR))
  
  output$jsTreeR_ui<-renderUI(jsTreeR_ui)
  output$jstree_tree_ui<-renderJstree(jstree(nodes_jsTreeR))
  
}

shinyApp(ui_jsTreeR,server_jsTreeR)

[stla]

Hello,

Thanks for the report. That is very strange. This is not due to the jsTreeR contained in the renderUI: if you remove it, you get the same strange behavior. I inspected the HTML code and I observed that the code for the button groups is different. In the first tab, there are only input type="radio" elements, while in the second tab, there are some button elements in addition. I have really no idea where are they from.

[datatenk]

If by "removing jsTreeR" could restore the radioGroupButtons to its original rendering, that has been tried and shown in my Reprex in which I used renderUI with shinyTree to achieve the correct rendering of radioGroupButton. However, it highlights the points that once renderUI is paired with jsTree, the radioGroupButton rendering breaks. There are actually 2 separately formed shinyApps in my reprex, one for each wrapper. The only difference between the 2 apps in my reprex is which jsTree wrapper is being used, shinyTree vs jsTreeR.

[pvictor]

Here https://github.com/stla/jsTreeR/blob/master/R/jstree.R#L458 you load Bootstrap 3 (Shiny default) as dependency, but bslib::page_navbar() by default load Bootstrap 5. A priori, when the renderUI is run, the Bootstrap theme of the server is updated to Bootstrap 3, whereas the HTML page uses Bootstrap 5 and radioGroupButton() generates an incorrect HTML markup (the one for BS 3).

Here an example where you can see the Bootstrap version being updated from 5 to NULL (the default, 3).

library(shiny)
library(bslib)
library(shinyWidgets)
library(shinyTree)
library(jsTreeR)


# using jsTreeR
nodes_jsTreeR<-list(list(text='foo',children=list(list(text='bar'))))

jsTreeR_ui <- card(
  jstreeOutput("jstree_tree_ui"),
  radioGroupButtons("rgb1", choices = c("A", "B"), size = "sm")
)


ui_jsTreeR<-page_navbar(
  title = "jsTreeR",
  id = "nav",
  header = verbatimTextOutput("bs_version"),
  nav_panel(
    title = "jsTreeR",
    card(
      jstreeOutput("jstree_tree"),
      radioGroupButtons("rgb", choices = c("A", "B"), size = "sm")
    )
  ),
  
  nav_panel(
    title = "jsTreeR uiOutput",
    uiOutput("jsTreeR_ui")
  )
)

server_jsTreeR<-function(input,output,session) {
  
  output$bs_version <- renderPrint({
    input$nav
    bslib::theme_version(session$getCurrentTheme())
  })
  
  output$jstree_tree <- renderJstree(jstree(nodes_jsTreeR))
  
  output$jsTreeR_ui <- renderUI(jsTreeR_ui)
  output$jstree_tree_ui <- renderJstree(jstree(nodes_jsTreeR))
  
}

shinyApp(ui_jsTreeR, server_jsTreeR)