Why toggleState does not work with modalDialog in R Shiny?

Question

When I use shinyjs::togglestate to compare all input variables from the UI with the modalDialog's input variables, it only works for the first time. If I close the modal dialog and open it again, it doesnt work!

The reactive rule is:

if they are equal: button is blocked
if they are different: the button is enabled

Obs: the values from the modal dialog variables must be the input values choosed in the UI. (This is very commom example if you have a database check and you just want to update it, if something changed)

I created this simple App to represent the issue. Just run it, click the button once, observe the expected behavior, close modal dialog, click second time and watch that it doesnt work anymore, but if you change some value in the modal dialog, and come back to the original input value it suddenly "remembers" to work again.

library(shiny)
library(shinyjs)

shinyApp(
  ui =
    fluidPage(
      useShinyjs(),
      sidebarLayout(
        sidebarPanel(
                     textInput("txt1","text"),
                     selectInput("select1","select",c("A","B","C")),
                     numericInput("n1","numeric",1),
                     dateInput("d1","date",value = Sys.Date()),

                     actionButton("go", "Go")),
      mainPanel())
    ),

  server =
    function(input, output, session) {


      observe({
        shinyjs::toggleState("click", !(input$txt1    == input$txt2 &&
                                        input$select1 == input$select2 &&
                                        input$n1      == input$n2 &&
                                        input$d1      == input$d2  
                                        ) )
        })

observeEvent(input$go,{
  showModal(
    modalDialog(
      textInput("txt2", "text", input$txt1),
      selectInput("select2", "select", c("A","B","C"), input$select1),
      numericInput("n2", "numeric", input$n1 ),
      dateInput("d2", "date", value = input$d1),

      actionButton("click", "Click")
    )
  )

})


    }
)

Why there's such unexpected behavior? Is there any workaround for it?

Thank you in advance !

Answer 1

The problem in your code is that the observe is evaluated only when the inputs are created, then when the inputs are changed. You'll need to evaluate your toggle condition every time you click on go. So you'll need to use of observeEvent in addition to using observe . The modified server code will look as follows:

server =
function(input, output, session) {

  observe({
    shinyjs::toggleState("click", !(input$txt1    == input$txt2 &&
                                      input$select1 == input$select2 &&
                                      input$n1      == input$n2 &&
                                      input$d1      == input$d2
    ) )
  })

  observeEvent(input$go,{
    showModal(
      modalDialog(
        textInput("txt2", "text", input$txt1),
        selectInput("select2", "select", c("A","B","C"), input$select1),
        numericInput("n2", "numeric", input$n1 ),
        dateInput("d2", "date", value = input$d1),

        actionButton("click", "Click")
      )
    )

  })

  observeEvent(input$go,{
    shinyjs::toggleState("click", !(input$txt1    == input$txt2 &&
                                      input$select1 == input$select2 &&
                                      input$n1      == input$n2 &&
                                      input$d1      == input$d2
    ) )
  })


}

Hope it helps!