text gets crossed between alerts when multiple alerts are used with HTML styling

[ARMurray]

It seems that if you use multiple shiny alerts that contain HTML styling, the text from the first alert that gets called (first one you click on) replaces text in subsequent alerts. I am using version 3.1.0 with R version 4.4.1. Shiny version is 1.9.0 and bslib version is 0.8.0

The following code works as expected:

library(shiny)
library(shinyalert)
library(bslib)

# Define UI
ui <- page_fillable(
  layout_columns(
    card(
      actionButton('Alert1', 'Alert 1')
    ),
    card(
      actionButton("Alert2","Alert 2")
    ),
    col_widths = c(6,6)
  )
)

# Define server logic
server <- function(input, output) {

    observeEvent(input$Alert1,
                 shinyalert(
                   #title = HTML('<p style="color:red; font-weight: bold;">Alert #1 Title </p>'),
                   title = HTML('Alert #1'),
                   text = "This is Alert #1",
                   size = "m", 
                   closeOnEsc = TRUE,
                   closeOnClickOutside = FALSE,
                   html = FALSE,
                   type = "",
                   showConfirmButton = TRUE,
                   showCancelButton = FALSE,
                   confirmButtonText = "OK",
                   confirmButtonCol = "#AEDEF4",
                   timer = 0,
                   animation = TRUE
                 ))
  
  observeEvent(input$Alert2,
               shinyalert(
                 #title = HTML('<p style="color:red; font-weight: bold;">Alert #2 TITLE: </p>'),
                 title = "Alert #2 TITLE",
                 text = "This is Alert #2",
                 size = "m", 
                 closeOnEsc = TRUE,
                 closeOnClickOutside = FALSE,
                 html = FALSE,
                 type = "success",
                 showConfirmButton = TRUE,
                 showCancelButton = FALSE,
                 confirmButtonText = "OK",
                 confirmButtonCol = "#AEDEF4",
                 timer = 0,
                 animation = TRUE
               ))
}

# Run the application 
shinyApp(ui = ui, server = server)

However, when I use html styling for the titles, the text from alert #1 persists into the text for alert #2:

server <- function(input, output) {

    observeEvent(input$Alert1,
                 shinyalert(
                   title = HTML('<p style="color:red; font-weight: bold;">Alert #1 Title </p>'),
                   #title = HTML('Alert #1'),
                   text = "This is Alert #1",
                   size = "m", 
                   closeOnEsc = TRUE,
                   closeOnClickOutside = FALSE,
                   html = TRUE,
                   type = "",
                   showConfirmButton = TRUE,
                   showCancelButton = FALSE,
                   confirmButtonText = "OK",
                   confirmButtonCol = "#AEDEF4",
                   timer = 0,
                   animation = TRUE
                 ))
  
  observeEvent(input$Alert2,
               shinyalert(
                 title = HTML('<p style="color:red; font-weight: bold;">Alert #2 TITLE: </p>'),
                 #title = "Alert #2 TITLE",
                 text = "This is Alert #2",
                 size = "m", 
                 closeOnEsc = TRUE,
                 closeOnClickOutside = FALSE,
                 html = TRUE,
                 type = "success",
                 showConfirmButton = TRUE,
                 showCancelButton = FALSE,
                 confirmButtonText = "OK",
                 confirmButtonCol = "#AEDEF4",
                 timer = 0,
                 animation = TRUE
               ))
}

Attached video of behavior:
https://github.com/user-attachments/assets/e640421a-10b2-4bcb-b646-57eddf557e6c

Any idea how to get around this behavior?

Thanks again for this package, it really is fantastic.

[daattali]

That's a very interesting bug! I tried testing it and if I change the <p> to other tags (such as <em> or <span> or <div>) then it works fine. For some reason the p tag is causing a mess! Here is a minimal reprex:

library(shiny)
library(shinyalert)

ui <- fluidPage(
  actionButton("go1", "1"),
  actionButton("go2", "2")
)

server <- function(input, output, session) {
  observeEvent(input$go1, {
    shinyalert(title = '<p>Alert 1 Title </p>', text = "one", html=T)
  })
  observeEvent(input$go2, {
    shinyalert(title = '<p>Alert 2 Title </p>', text = "two", html=T)
  })
}

shinyApp(ui, server)

If you're familiar with javascript, would you be able to test it in the javascript library to see if the bug comes from the JS library or not?