I am working on an R Shiny app that uses many input_task_button()s, which are great to prevent users from spam clicking. The buttons change color when hovering, and again when clicking, then again when in a "busy" state. The issue I'm having is, if you move your mouse off of the button while it is in the busy state, then, when it returns to "ready", it is stuck in the "hover" state until you hover back over it.
I read somewhere that this is because the button doesn't actually know where the mouse is, it just senses when the mouse enters or leaves its area. So if the mouse leaves while the button is disabled, it doesn't get the memo and assumes the mouse is still hovering.
Here's a reprex:
library(shiny)
library(bslib)
ui <- fluidPage(
theme = bs_theme(),
tags$head(
tags$style(HTML("
.bslib-task-button:hover {
background-color: #ffcc00 !important;
color: #000000 !important;
}
"))
),
input_task_button("task_button", "Click Me", class = "bslib-task-button"),
textOutput("result_text")
)
server <- function(input, output, session) {
observeEvent(input$task_button, {
Sys.sleep(2)
output$result_text <- renderText("Task completed!")
})
}
shinyApp(ui, server)
If you click the button, wait for it to be busy, and move the mouse off the button while it's busy, then it will remain that yellow color rather than returning to the blue color.
Is there some JavaScript, CSS, or update_task_button() function I can write that will fix this behavior? Ideally I could just add a script in one place and have it apply to all input_task_button()s throughout the app, as there are quite a few that do many different things. Even something like forcing a "mouse leave" event whenever an input_task_button goes from busy to ready would probably work, but I can't seem to get that to happen (my Javascript knowledge is nonexistent, and CoPilot can't figure this one out either).
UPDATE: Okay, all of a sudden the behavior of my example is being inconsistent. Sometimes it stays the yellow color while busy and after returning to ready, and sometimes it behaves exactly as desired and turns light blue while busy and full blue when ready again. I can't figure out what makes it do one versus the other.