input_task_button 卡在悬停状态

Question

我正在开发一个使用许多 input_task_button() 的 R Shiny 应用程序。按钮在悬停时会改变颜色，单击时会再次改变颜色，然后在处于“忙碌”状态时会再次改变颜色。我遇到的问题是，如果您在按钮处于忙碌状态时将鼠标从按钮上移开，那么当它返回“就绪”状态时，它会停留在“悬停”状态，直到您将鼠标悬停在其上方.

我在某处读到这是因为按钮实际上并不知道鼠标在哪里，它只是感知鼠标何时进入或离开其区域。因此，如果鼠标在按钮禁用时离开，它不会收到备忘录并假设鼠标仍在悬停。

这是一个表示：

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)

如果您单击按钮，等待其繁忙，然后在其繁忙时将鼠标从按钮上移开，那么它将保持黄色，而不是像应有的那样返回到蓝色。如果您再次将鼠标悬停在其上然后离开，它会自行修复。

我可以编写一些 JavaScript、CSS 或 update_task_button() 函数来修复此行为吗？理想情况下，我可以只在一处添加一个脚本，并将其应用于整个应用程序中的所有 input_task_button()，因为有很多脚本可以执行许多不同的操作。即使是像每当 input_task_button 从忙碌状态变为就绪状态时强制执行“鼠标离开”事件之类的事情也可能会起作用，但我似乎无法实现这种情况（我的 JavaScript 知识不存在，CoPilot 也无法弄清楚这一点） ).

更新：好的，突然间我的示例的行为变得不一致。有时，它在忙碌时和返回就绪状态后保持黄色，有时它的行为完全符合预期，在忙碌时变为浅蓝色，再次就绪时变为全蓝色。我不明白是什么让它做到这一点。

Answer 1

看起来按钮在繁忙时基本上停止“监听”。我还注意到，当您移动鼠标时，它可能会也可能不会影响

busy

状态下的按钮颜色（当它显示“正在处理”时）。

您可以使用的一个选项是将其添加到您的

style

标签中，以确保在就绪状态下重置颜色。

.bslib-task-button[case='ready'] {
  background-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

这将确保当完成思考后它会回到“悬停”颜色。我建议您还定义

busy

或

processing

状态下的颜色。要定义样式，请使用我用于

ready

状态的模板 - 我在其中编写了

'ready'

，将其更改为

busy

并根据需要设置颜色。