为何shinyjs::reset会覆盖后续的updateTextInput命令？

问题原因 #

shinyjs::reset()是客户端同步DOM操作，会立即将表单重置为初始状态；而updateTextInput()是服务器向客户端发送异步更新指令。两者连续执行时，客户端的重置操作会覆盖后续到达的更新指令，导致name输入框无法被设置为指定值。

解决方案 #

给输入框更新操作添加微小延迟，确保重置完成后再执行更新。使用shinyjs::delay()实现该逻辑：

修改example按钮对应的事件处理代码：

observeEvent(input$example, {
  shinyjs::reset("myapp")
  # 100毫秒延迟足够确保重置操作完成
  shinyjs::delay(100, {
    shiny::updateTextInput(session, "name", value = "Joe Schmoe")
  })
})

完整可运行代码 #

library(shiny)
shinyApp(
  ui = fluidPage(
    shinyjs::useShinyjs(),
    shinyjs::inlineCSS(list(.big = "font-size: 2em")),
    div(id = "myapp",
        h2("shinyjs demo"),
        checkboxInput("big", "Bigger text", FALSE),
        textInput("name", "Name", ""),
        a(id = "toggleAdvanced", "Show/hide advanced info", href = "#"),
        shinyjs::hidden(
          div(id = "advanced",
              numericInput("age", "Age", 30),
              textInput("company", "Company", "")
          )
        ),
        p("Timestamp: ",
          span(id = "time", date()),
          a(id = "update", "Update", href = "#")
        ),
        actionButton("submit", "Submit"),
        actionButton("reset", "Reset form"),
        actionButton("example", "Fill example name")
    )
  ),

  server = function(input, output, session) {
    observe({
      shinyjs::toggleState("submit", !is.null(input$name) && input$name != "")
    })

    shinyjs::onclick("toggleAdvanced",
                     shinyjs::toggle(id = "advanced", anim = TRUE))

    shinyjs::onclick("update", shinyjs::html("time", date()))

    observe({
      shinyjs::toggleClass("myapp", "big", input$big)
    })

    observeEvent(input$submit, {
      shinyjs::alert("Thank you!")
    })

    observeEvent(input$reset, {
      shinyjs::reset("myapp")
    })

    observeEvent(input$example, {
      shinyjs::reset("myapp")
      shinyjs::delay(100, {
        shiny::updateTextInput(session, "name", value = "Joe Schmoe")
      })
    })
  }
)

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