shinyalert icon indicating copy to clipboard operation
shinyalert copied to clipboard

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

Open daattali opened this issue 4 years ago • 2 comments

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.

daattali avatar Feb 22 '21 02:02 daattali

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:

  • ID and password entered are: 'x', '123'
  • After clicking the "Ok" button: we have input$id return 'x' and input$password return '123';
  • Ask user to enter ID and password again use the same shinyalert. New ID and password entered are: 'y', '000'
  • After clicking the "Ok" button: we have input$id still return 'x' and input$password still return 123

ghost avatar Aug 24 '21 21:08 ghost

Yes this is a known issue

daattali avatar Aug 25 '21 00:08 daattali

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.

ch0c0l8ra1n avatar Mar 20 '24 19:03 ch0c0l8ra1n