Shiny: initialize a tabPanel() as disabled

Question

I have an app where a certain tabPanel() must be initialised as disabled.

Solutions seen elsewhere (e.g. Shiny: Disable tabPanel() using shinyjs) address the problem by disabling the tabPanel() after the app is loaded, which causes a flickering or blinking of the tabPanel in question, because it is initialised as enabled and then disabled afterwards.

Based on my understanding, the shinyjs::disabled() function achieves what I need when applied to shiny inputs (https://www.rdocumentation.org/packages/shinyjs/versions/2.1.0/topics/disabled).

I need an equivalent function to be applied to a tabPanel(), so that the tabPanel() is initialised as disabled and does not flicker when the app is loaded.

I am posting here the same code of the above referenced SO question, with a slight modification (I am disabling only the third tab instead of the second and the third, as the flickering can be better noticed). The flickering on the third tab can be noticed every time the app is loaded.

library(shiny)
library(shinyjs)

css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"

ui <- shinyUI(fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::inlineCSS(css),
  navbarPage("Test",id="navbarPage",
             tabPanel("FirstTab", id = "first_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Secondtab", id = "second_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Third tab", id = "third_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             )
  )
))

server <- shinyServer(function(input, output, session) {
  shinyjs::disable(selector = '.navbar-nav a[data-value="Third tab"')
})

# Run the application
shinyApp(ui = ui, server = server)

How can the flickering of the third tab be avoided?

score 0 · Answer 1 · answered May 10 '23 at 13:52

To disable a tab, it suffices to add the class disabled to its corresponding li element. It's easy with jQuery:

library(shiny)

js <- '$(document).ready(function() {
  $("ul.nav>li:eq(2)").addClass("disabled");
});' # note that the selector of the third tab is eq(2) and not eq(3), 
     # because the indexing starts at 0

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  navbarPage("Test", id="navbarPage",
             tabPanel("FirstTab", id = "first_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Secondtab", id = "second_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Third tab", id = "third_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             )
  )
)

server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

Now if you want to re-enable the tab, the easiest way is to use shinyjs and its runjs function to execute $("ul.nav>li:eq(2)").removeClass("disabled");.

Shiny: initialize a tabPanel() as disabled

1 Answers1