R Shiny中input_task_button hover状态卡顿问题求助

核心思路是通过JavaScript全局监听所有input_task_button的状态变化，当按钮从禁用（busy）状态恢复为启用状态时，手动触发mouseleave事件，强制清除hover样式，无需逐个修改按钮。

实现方案 #

在UI的tags$head中添加以下代码，结合原有CSS和按钮结构即可解决问题：

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;
            }
        ")),
        tags$script(HTML("
        document.addEventListener('DOMContentLoaded', function() {
          // 选中所有带指定类的任务按钮
          const taskButtons = document.querySelectorAll('.bslib-task-button');
          
          taskButtons.forEach(button => {
            // 创建观察者监听按钮的disabled属性变化
            const observer = new MutationObserver(function(mutations) {
              mutations.forEach(mutation => {
                // 当按钮从禁用变为启用时
                if (mutation.attributeName === 'disabled' && !button.disabled) {
                  // 手动触发mouseleave事件清除hover样式
                  button.dispatchEvent(new Event('mouseleave'));
                }
              });
            });
            
            // 开始观察按钮属性变化
            observer.observe(button, { attributes: true });
          });
        });
        "))
    ),
    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)

原理说明 #

• 按钮处于busy状态时会被设置为disabled，此时无法响应mouseleave事件，若鼠标此时离开，按钮会残留hover样式。
• 使用MutationObserver监听按钮的disabled属性变化，确保在按钮恢复可用的第一时间触发mouseleave事件，强制浏览器清除hover状态。
• 该脚本会自动作用于所有带有bslib-task-button类的按钮，无需单独配置每个按钮。

关于表现不一致的说明 #

之前出现的状态显示不稳定问题，是因为按钮状态切换时机与鼠标事件触发存在偶发性差异。通过属性监听的方式，可以精准捕捉按钮恢复可用的时刻，避免样式残留的偶发问题。

内容的提问来源于stack exchange，提问作者tlbello