Disabling Confirm Button in confirmSweetAlert

Question

I'm trying to disable the confirm button in confirmSweetAlert unless selectizeInput has some input within it. There seem to be solutions by using Javascript, such as swal.disableConfirmButton() and document.getElementsByClassName().disabled = true, but when I run them under shinyjs::runjs, these don't seem to work. Are there any solutions out there to resolve this issue? Here's my sample code:

shinyApp(
  ui <- fluidPage(
    actionButton("button", "Show Sweet Alert!")
  ),

  server <- function(input, output, session) {
    observeEvent(input$button, {
      confirmSweetAlert(
        session = session,
        inputId = "letterSelect",
        title = "Select a Letter!",
        type = "info",
        text = tags$div(
          h4("Please select from the options below then press 'Confirm'.", align = "center"),
          selectizeInput(
            inputId = "letters",
            label = NULL,
            choices = c("A", "B", "C"),
            options = list(placeholder = "None selected."),
            multiple = TRUE,
            width = '100%')
        ),
        closeOnClickOutside = FALSE
      )      
    })
  }

)

score 1 · Accepted Answer · answered May 13 '20 at 11:13

1

This seems to work:

library(shiny)
library(shinyWidgets)
library(shinyjs)

shinyApp(
  ui <- fluidPage(
    useShinyjs(),
    actionButton("button", "Show Sweet Alert!")
  ),

  server <- function(input, output, session) {
    observeEvent(input$button, {
      confirmSweetAlert(
        session = session,
        inputId = "letterSelect",
        title = "Select a Letter!",
        type = "info",
        text = tags$div(
          h4("Please select from the options below then press 'Confirm'.", align = "center"),
          selectizeInput(
            inputId = "letters",
            label = NULL,
            choices = c("A", "B", "C"),
            options = list(placeholder = "None selected."),
            multiple = TRUE,
            width = '100%')
        ),
        closeOnClickOutside = FALSE
      )
      runjs("Swal.getConfirmButton().setAttribute('disabled', '');")
    })

    observe({
      if(is.null(input$letters)){
        runjs("Swal.getConfirmButton().setAttribute('disabled', '');")
      }else{
        runjs("Swal.getConfirmButton().removeAttribute('disabled');")
      }
    })
  }

)

answered May 13 '20 at 11:13

Stéphane Laurent

75,186
15
119
225

Thanks so much for your response! I ran this code, but I'm still not getting a disabled 'Confirm' button. I replaced the JS code with the other variants I noted above, and it still doesn't seem to work. – m.yoshih May 13 '20 at 16:09
@m.yoshih What is the version of shinyWidgets you are using? – Stéphane Laurent May 13 '20 at 16:12
Thanks for pointing that out; I had version 0.4.8. It now works with the updated version of 0.5.1, though the Selectize dropdown appears behind the buttons. – m.yoshih May 13 '20 at 16:52
Any way to work around the dropdown appearing behind the buttons? – m.yoshih May 19 '20 at 20:19
I was looking to do the same thing but with the "cancel" button. So i'm writing here the equivalent to disable the cancel button on sweet alert, in case someone else needs it `runjs("Swal.getCancelButton().setAttribute('disabled', '');")` – gdevaux Nov 30 '20 at 07:09

Disabling Confirm Button in confirmSweetAlert

1 Answers1