ConditionalPanel issue when using bootstrap 4 or 5 with dynamic UI

[felloumi]

Hello,

I have no problem with the following code when using Bootstrap 3. Switching to Bootstrap 4 or 5, the conditionalPanel is not working.

code

library(shiny)
library(bslib)
ui <- fluidPage(
theme = bs_theme(version = 4), # Using Bootstrap 4 causes issue
navbarPage(title="test",
tabPanel("Options",
fluidPage(
sidebarLayout(
sidebarPanel(
# width=6,
p("Select a tab to display different content."),
conditionalPanel(
condition = "input.tabs == '1' || input.tabs == '2' || input.tabs == '4'",
uiOutput("xAxisRangeUi")
)
),
mainPanel(
uiOutput("dynamicTabset")
)
)
)
),

tabPanel("Help",
HTML("help section")
)
)

)

server <- function(input, output, session) {
output$dynamicTabset <- renderUI({
tabsetPanel(
id = "tabs",
# selected = 1,
tabPanel("Tab 1", value = "1", "Content for Tab 1"),
tabPanel("Tab 2", value = "2", "Content for Tab 2"),
tabPanel("Tab 3", value = "3", "Content for Tab 3"),
tabPanel("Tab 4", value = "4", "Content for Tab 4")
)
})

observe({
print(input$tabs)
})

output$xAxisRangeUi <- renderUI({
tagList(
sliderInput("xAxisRange", "X Axis Range:", min = 0, max = 100, value = c(25, 75))
)
})
}

shinyApp(ui = ui, server = server)

I appreciate your help on this issue. I am using shiny 1.10.0 and bslib 0.9.0
Thanks.

[Simon_Smart]

The problem isn't with the conditionalPanel but rather input$tabs being NULL (as you seem to have realised). I'm not sure why it's happening, but I think part of the problem is your nested use of various *Page functions. You normally just use one of fluidPage or navbarPage as the first UI function, not fluidPage(navbarPage(fluidPage)))as you have. When I just use one fluidPage it works, but maybe that isn't your intended layout. If you are using BS4 or BS5, it may also be sensible to switch to using the bslib layout functions like page_fluid, navset_tab(nav_panel())