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.