daattali / shinyalert

🗯️ Easily create pretty popup messages (modals) in Shiny
https://daattali.com/shiny/shinyalert-demo/
Other
241 stars 26 forks source link

Inputs and outputs don't work correctly when a modal fires too quickly after a closed modal #48

Closed daattali closed 4 months ago

daattali commented 3 years ago

Related to #46

In the following example, a modal is opened, closed, and another modal with a shiny input immediately opens. The input doesn't get bound to shiny (same thing happens with outputs).

library(shiny)

ui <- fluidPage(
  actionButton("go", "go")
)

server <- function(input, output, session) {
  observeEvent(input$go, {
    shinyalert::shinyalert("test 1")
    shinyalert::closeAlert()
    shinyalert::shinyalert("test 2", textInput("text", "text", "test"), html = TRUE)
  })

  observe({
    message(input$text)
  })
}

shinyApp(ui, server)

If I add a 500ms delay (either using Sys.sleep() or shinyjs::delay()) after closing the first modal but before showing the second, then the input binding works.

ghost commented 3 years ago

I am having a similar issue when creating an authentication interface. Basically, I ask an user for ID and password, then trigger another reactive to validate the ID & password. If the validation fails, I trigger the shinyalert that asked for the ID and password to begin with. I noticed that, if a new value is entered, then the values in input do not get updated.

For example:

daattali commented 3 years ago

Yes this is a known issue

ch0c0l8ra1n commented 5 months ago

The problem lies in swalservice. The way this.__swal.close is defined creates problems when you try to close and open up another sweetalert immediately. Specifically the settimeout. It's trigerring the close function after the 2nd shinyalert is already starting to initialize.

initialize: function() {
  var service = this;
  var originalClose = this.__swal.close;
  this.__swal.close = function() {
    service.isClosing = true;
    originalClose();
    service.currentSwal = null;
    setTimeout(function() {
      service.onClosed();
    }, 400);
  };
}

I can have a PR sent with this fixed but once again, this involves modifying the underlying sweetalert source.