Remove the click trigger from flipbox

I use the function flipBox from shinydashboardPlus to create flip box and I add a button. The user have to clik on it to flip the box. But the box also flip when we click on it and I would like to desactive it I mean prevent fliping by cliking on the box (the box must flip only when we click on the button). This is what I did :

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
    
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      actionButton("swich_id", "click to swich"), # click on the button to flip the box

      flipBox(
        id = "id1",
        front = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("A"), 
          p("a table"),
          DT::DTOutput('mytable')
        ),
        back = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("B"),
          p("a graphe"),
          plotOutput("graph")
        )
      )
    )
  ),
  
  server = function(input, output, session) {

    output$mytable <- DT::renderDT({
      cars[1:5, 1:2]
    })
    
    output$graph <- renderPlot({
      plot(cars$speed, cars$dist)
    })
    
    observeEvent(input$swich_id, {
      updateFlipBox("id1")
    })
  }
)

Some help would be appreciated

There is no official way to do so. We need to have our own custom hacky way to change the source code of flipBox.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)

flipBox <- function (id, front, back, trigger = c("click", "hover", "disable"), width = 6) {
    if (is.null(id) || missing(id)) 
        stop("card id cannot be null or missing!")
    trigger <- match.arg(trigger)
    shiny::column(width = width, shiny::tags$div(style = "position: relative", 
        class = "flipbox", id = id, `data-rotate` = trigger, 
        shiny::tags$div(class = "card-front active", style = "background-color: white;", 
            front), shiny::tags$div(class = "card-back", style = "background-color: white;", 
            back)))
}



shinyApp(
    ui = dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody(
            useShinyjs(),
            tags$script(HTML(
            '
            function _clickOnFront(el) {
                $(el)
                  .find(".card-front")
                  .css({
                    "-webkit-transform": "perspective(1600px) rotateY(-180deg)",
                    transform: "perspective(1600px) rotateY(-180deg)"
                  })
                  .toggleClass("active");
                $(el)
                  .find(".card-back")
                  .css({
                    "-webkit-transform": "perspective(1600px) rotateY(0deg)",
                    transform: "perspective(1600px) rotateY(0deg)"
                  })
                  .toggleClass("active");
             }
            function _clickOnBack(el) {
                $(el)
                  .find(".card-front")
                  .css({ "-webkit-transform": "", transform: "" })
                  .toggleClass("active");
                $(el)
                  .find(".card-back")
                  .css({ "-webkit-transform": "", transform: "" })
                  .toggleClass("active");
            }
            '
            )),
            actionButton("swich_id", "click to swich"), # click on the button to flip the box
            
            flipBox(
                id = "id1",
                trigger = "disable",
                front = div(
                    class = "text-center",
                    height = "300px",
                    width = "100%",
                    h1("A"), 
                    p("a table"),
                    DT::DTOutput('mytable')
                ),
                back = div(
                    class = "text-center",
                    height = "300px",
                    width = "100%",
                    h1("B"),
                    p("a graphe"),
                    plotOutput("graph")
                )
            )
        )
    ),
    
    server = function(input, output, session) {
        
        output$mytable <- DT::renderDT({
            cars[1:5, 1:2]
        })
        
        output$graph <- renderPlot({
            plot(cars$speed, cars$dist)
        })
        
        observeEvent(input$swich_id, {
            if(input$swich_id %% 2 != 0) return(runjs('_clickOnFront($("#id1"))'))
            runjs('_clickOnBack($("#id1"))')
        })
    }
)

1. define our own flipBox function. Here we add one more option trigger = c("click", "hover", "disable") to allow us to choose methods other than click or hover.
2. Copy the flip functions from source code and define as JS functions that we have easy access with tags$script.
3. Use shinyjs to manually flip the box when the button is clicked.