[SOLVED] Shinytree render gone if the panel is being collapsed by opening another panel

Shinytree render gone if the panel is being collapsed by opening another panel

I am trying to build a shinydashboard for my workplace to create a searchable table to display who is good at doing what in our different branches.

I wanted to have two sidebar items, to filter the table either by location, or by techniques. The location would be a tree (Country/City/Name), and the technique a set of buttons.

My issue is when I jump from one tab to the other. If I close the location tab before jumping to the technique tab (or the reverse), everything works fine, but if I open the technique tab without closing the location, the tree disappears, and I can't get it back.

Similar to my other post Here I tried to inspect the page, I can see that the line <ul class="jstree-container-ul jstree-children jstree-no-icons jstree-striped" role="group"> gets a new argument style="display: none;" once another panel is open, and this will not be overwritten when I reopen the panel. Typing something in the text bar does restore display to block, but I dont know how to force display : block when I click on the panel. I tried to use the same trick as the other post, but I cant find how to adapt it to shinytree.

js <- " $(document).ready(function() { $('a[href=\"#shiny-tab-location\"').on('click', function() { $('.treejs-nodes').css('display', 'block'); }); }) "

My code to reproduce :

library(shiny)
library(shinyTree)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(title = "Filters"),
  dashboardSidebar(
    # Increase the width of the sidebar panel
    useShinyjs(),
    sidebarMenu(
      menuItem("By Location", tabName = "location", icon = icon("earth-europe"),
               div(
                 style = "max-height: 42vh; overflow-y: auto; overflow-x: auto;",  # Set the maximum height and provide a scrollbar
                 shinyTree("tree", stripes = TRUE, multiple = TRUE, animation = TRUE, checkbox = TRUE, search=TRUE, themeIcons = FALSE)
               )
               
      ),
      
      menuItem("By Technique", tabName = "technique", icon = icon("microscope"),
               fluidRow(
                 # Adjust column sizing and spacing
                 column(3, actionBttn(inputId = "group1_btn", label = "Btn1", style = "jelly", color = "danger")),
                 column(3, actionBttn(inputId = "group2_btn", label = "Btn1", style = "jelly", color = "danger")),
                 column(3, actionBttn(inputId = "group3_btn", label = "Btn1", style = "jelly", color = "danger"))
                 
               ),
               
               # Technique checkboxes will be displayed here in the body
               uiOutput("technique_checkboxes")
               
    ))),
  dashboardBody(
    DTOutput("table")
  ))

server <- function(input, output, session) {
  output$tree <- renderTree({
    list(
      root1 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListAB = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListAC = list(leaf1 = "", leaf2 = "", leaf3="")
      ),
      root2 = list(
        SubListB = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListBA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListBC = list(leafA = "", leafB = "")
      )
    )
  })
}

shinyApp(ui,server)

Solution

Problem was solved on Github

I'm not sure why this stays hidden, but the following fixed the issue for me:

observeEvent(input$sidebarItemExpanded, { runjs("$('#tree > ul').css('display', 'block');") })