Carousel doesn't work with output+render functions

[daattali]

When a carouselItem is created with an output in it, the output does not show up in the carousel.

library(shiny)
library(shinydashboardPlus)

ui <- fluidPage(
  carousel(
    id = "carosel",
    carouselItem("1", textOutput("text1")),
    carouselItem("2", textOutput("text2")),
    carouselItem("this works")
  )
)

server <- function(input, output, session) {
  output$text1 <- renderText("test")
  output$text2 <- renderText("test2")
}

shinyApp(ui, server)

The second item doesn't show up.

Comments/possible cause: I checked the DOM and the placeholder for the output does exist, but it never gets populated. Also, the very first item of the carousel does always work properly. This leads me to believe that perhaps shiny just needs to know when these items are being shown, because of their automatic baheviour of not rendering hidden elements. You would need to tell shiny in javascript when an item gets shown.

[daattali]

I'm now almost certain that my previous guess of why this bug is happening is correct. Because when I tell shiny to not ignore hidden outputs, they work.

Add outputOptions(output, "text2", suspendWhenHidden = FALSE) to the above server function, and the carousel item will show up.

[DivadNojnarg]

Thanks for the report. Something like that should work.

library(shiny)
library(shinyWidgets)
library(shinydashboardPlus)

ui <- fluidPage(
  useShinydashboardPlus(),
  shiny::tags$head(
    shiny::tags$script(
      '$(document).ready(function() {
         $(".carousel").trigger("shown");
       });
      '
    )
  ),
  carousel(
    id = "carousel",
    carouselItem("1", textOutput("text1")),
    carouselItem("2", textOutput("text2")),
    carouselItem("this works")
  )
)

server <- function(input, output, session) {
  output$text1 <- renderText("test")
  output$text2 <- renderText("test2")
}

shinyApp(ui, server)

I will do a clean update asap (using dedicated js code and updating the related htmlDependencies).

Notice that if you want to use shinydashboardPlus elements outside shinydashboardPlus, you need to add useShinydashboardPlus() after fluidPage() (to load CSS and js). You also need the latest devel version of shinyWidgets.

[DivadNojnarg]

Hi Dean,

The best carousel related js method I found is the following (taken from Bootstrap 4 but same thing for Bootstrap 3):

$(function(){
  $('.carousel').on('slide.bs.carousel', function () {
    $(this).trigger("shown");
  });
});

Try it on the devel version of shinydashboardelus and let me know.