daattali / shinyalert

🗯️ Easily create pretty popup messages (modals) in Shiny

Home Page:https://daattali.com/shiny/shinyalert-demo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

daattali opened this issue · 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.

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

Yes this is a known issue

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.