verticalTabs: fixed bug not rendering output with bs5

.gitignore

@@ -13,3 +13,4 @@ revdep/data.sqlite
 revdep/library/
 docs
 node_modules
+CRAN-SUBMISSION

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: shinyWidgets
 Title: Custom Inputs Widgets for Shiny
-Version: 0.7.5.9010
+Version: 0.7.5.9100
 Authors@R: c(
   person("Victor", "Perrier", email = "[email protected]", role = c("aut", "cre", "cph")),
   person("Fanny", "Meyer", role = "aut"),
@@ -18,7 +18,7 @@ BugReports: https://github.com/dreamRs/shinyWidgets/issues
 License: GPL-3
 Encoding: UTF-8
 LazyData: true
-RoxygenNote: 7.2.1
+RoxygenNote: 7.2.3
 Roxygen: list(markdown = TRUE)
 Depends:
     R (>= 3.1.0)

NEWS.md

@@ -1,3 +1,12 @@
+shinyWidgets 0.7.7
+======================
+
+### Bug fixes
+
+* `verticalTabsetPanel()` does not render output content when using Bootstrap 5 [#570](https://github.com/dreamRs/shinyWidgets/issues/570).
+
+
+
 shinyWidgets 0.7.6
 ======================
 

examples/vertical-tab-update.R

@@ -0,0 +1,57 @@
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  theme = bslib::bs_theme(version = 5),
+  fluidRow(
+    column(
+      width = 10, offset = 1,
+      tags$h2("Update vertical tab panel example:"),
+      verbatimTextOutput("res"),
+      radioButtons(
+        inputId = "update", label = "Update selected:",
+        choices = c("Title 1", "Title 2", "Title 3"),
+        inline = TRUE
+      ),
+      verticalTabsetPanel(
+        id = "TABS",
+        verticalTabPanel(
+          title = "Title 1", icon = icon("house", "fa-2x"),
+          "Content panel 1",
+          textOutput("text1")
+        ),
+        verticalTabPanel(
+          title = "Title 2", icon = icon("map", "fa-2x"),
+          "Content panel 2",
+          textOutput("text2")
+        ),
+        verticalTabPanel(
+          title = "Title 3", icon = icon("rocket", "fa-2x"),
+          "Content panel 3",
+          textOutput("text3")
+        )
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+
+  output$res <- renderPrint(input$TABS)
+  observeEvent(input$update, {
+    shinyWidgets:::updateVerticalTabsetPanel(
+      session = session,
+      inputId = "TABS",
+      selected = input$update
+    )
+  }, ignoreInit = TRUE)
+
+  output$text1 <- renderText("one")
+  output$text2 <- renderText("two")
+  output$text3 <- renderText("three")
+
+}
+
+
+if (interactive())
+  shinyApp(ui, server)

examples/vertical-tab.R

@@ -2,7 +2,7 @@ library(shiny)
 library(shinyWidgets)
 
 ui <- fluidPage(
-  # theme = bslib::bs_theme(version = 5L),
+  theme = bslib::bs_theme(version = 5L),
   fluidRow(
     column(
       width = 10, offset = 1,

inst/assets/vertical-tab-panel/vertical-tab-panel-bindings.js

@@ -18,12 +18,14 @@ if (shinyMode) {
         $(this)
           .parents(".vrtc-tab-panel-container")
           .find("div.vrtc-tab-panel>div.vrtc-tab-panel-content")
-          .removeClass("active");
+          .removeClass("active")
+          .trigger("hidden.bs.collapse");
         $(this)
           .parents(".vrtc-tab-panel-container")
           .find("div.vrtc-tab-panel>div.vrtc-tab-panel-content")
           .eq(index)
-          .addClass("active");
+          .addClass("active")
+          .trigger("shown.bs.collapse");
       });
     },
     find: function(scope) {
@@ -86,12 +88,14 @@ if (shinyMode) {
       $(this)
         .parents(".vrtc-tab-panel-container")
         .find("div.vrtc-tab-panel>div.vrtc-tab-panel-content")
-        .removeClass("active");
+        .removeClass("active")
+        .trigger("hidden.bs.collapse");
       $(this)
         .parents(".vrtc-tab-panel-container")
         .find("div.vrtc-tab-panel>div.vrtc-tab-panel-content")
         .eq(index)
-        .addClass("active");
+        .addClass("active")
+        .trigger("shown.bs.collapse");
     });
   });
 }