daattali / daattali/shinyalert

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

Open
#89 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
R
Stars
246
Forks
27
PR merge metrics
No merged PRs in 30d

Description

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('

Alert #1 Title

'),
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('

Alert #2 TITLE:

'),
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('

Alert #1 Title

'),
#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('

Alert #2 TITLE:

'),
#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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by running the two minimal Shiny server examples from the issue with shinyalert 3.1.0, comparing the HTML-styled and plain-title cases while opening Alert 1 and Alert 2 in sequence. Trace the alert rendering path used when html = TRUE and verify the fix by confirming that each alert keeps its own title and text when multiple alerts are triggered.

Written by the indexing model from the issue text.

Assessment

Tech stack
r
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.