Input Buttons in Safari and other Browsers (not Chrome) #241
Description
The following code below will work perfectly in Chrome but not in Safari, where there are much stricter rules regarding javascript. The buttons render as visually expected but when going to click the input button it does not lead to a file input window. This makes it very difficult for the broader accessibility of my application. Can you please please provide alternatives and/or methods to help make the shiny app more broadly used across multiple browsers?
require(shiny)
require(shiny.fluent)
require(shinyjs)
ui <-
fluentPage(
useShinyjs(),
PivotItem(
headerText = "Import Your Data",
div(
tokens = list(childrenGap = 15),
children = list(
Label(HTML("5. Upload Files: <span style='color:#a4262c;'>*</span>")),
Text(variant = "medium", "Upload Raw Data Files (.xlsx or .csv):"),
div(
style = "margin-bottom: 10px;", # Space for the text above the button
PrimaryButton.shinyInput(
"uploadButton1",
text = "Upload",
iconProps = list(iconName = "Upload"),
style = "margin-bottom: 10px; display: block;" # Ensures the button is on a new line
)
),
div(
style = "visibility: hidden; width: 0; height: 0; overflow: hidden;",
fileInput("raw_data", label = "", multiple = TRUE, accept = c(".xlsx", ".csv"))
),
uiOutput("uploadMessage1"), # Output to display the success message
Text(variant = "medium", "Upload Plate Layout (.xlsx):"),
div(
style = "margin-bottom: 10px;", # Space for the text above the second button
PrimaryButton.shinyInput(
"uploadButton2",
text = "Upload",
iconProps = list(iconName = "Upload"),
style = "margin-bottom: 10px; display: block;" # Ensures the button is on a new line
)
),
div(
style = "visibility: hidden; width: 0; height: 0; overflow: hidden;",
fileInput("plate_layout", label = "", accept = ".xlsx")
),
uiOutput("uploadMessage2"), # Output to display the success message
Label(HTML("6. Save Inputs: <span style='color:#a4262c;'>*</span>")),
div(
style = "margin-bottom: 10px;", # Space for the text above the button
PrimaryButton.shinyInput(
"save_inputs",
text = "Save Inputs",
iconProps = list(iconName = "Save"),
style = "margin-bottom: 10px; display: block;" # Ensures the button is on a new line
)
),
uiOutput("notification")
)
)
)
)
server <- function(input, output, session){
observeEvent(input$uploadButton1, {
click("raw_data")
})
observeEvent(input$uploadButton2, {
click("plate_layout")
})
observeEvent(input$raw_data, {
if (!is.null(input$raw_data)) {
output$uploadMessage1 <- renderUI({
MessageBar(
messageBarType = 4,
"Files Imported!"
)
})
}
})
observeEvent(input$plate_layout, {
if (!is.null(input$plate_layout)) {
output$uploadMessage2 <- renderUI({
MessageBar(
messageBarType = 4,
"Files Imported!"
)
})
}
})
}
raw_data <- reactive({
req(input$raw_data)
input$raw_data
})
plate_layout <- reactive({
req(input$plate_layout)
input$plate_layout
})
}
shinyApp(ui, server)