R Shiny中uiOutput导致numericInput输入时自动失焦的问题求助

问题根源 #

你代码里的renderUI直接依赖了输入框的input值，只要用户在numericInput里输入内容，input值变化就会触发renderUI重新执行——这会把所有新增行的输入框全部销毁重建，导致输入框瞬间失焦，只能输入单个字符。

解决方案 #

放弃用uiOutput+renderUI批量重建的方式，改用insertUI动态插入单个输入行。insertUI只会在点击添加按钮时执行一次，插入新的输入元素，不会因为后续输入操作重新渲染整个区块，完美解决失焦问题。同时用reactiveValues存储已添加的ID，替代全局变量避免状态污染。

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  fluidRow(wellPanel(h3("Category and quantity input"))),
  wellPanel(
    fluidRow(
      column(width=4, selectInput("type0", label = h4("type"), choices= list("choice1" = 1,"choice2" = 2, "choice3"=3))),
      column(width=4, numericInput("quantity0", label = h4("quantity"), value = 0, min=0)),
      column(width=4, actionButton("New_row", label="Add new row"))
    ),
    # 新增容器承载动态添加的行
    div(id = "new_row_container")
  )
)

server <- function(input, output, session) {
  # 用reactiveValues存储已添加的行ID，替代全局变量
  rv <- reactiveValues(ids = c())
  
  observeEvent(input$New_row, {
    # 生成新行ID
    new_id <- if(length(rv$ids) == 0) 1 else max(rv$ids) + 1
    rv$ids <- c(rv$ids, new_id)
    
    # 动态插入新的输入行
    insertUI(
      selector = "#new_row_container",
      where = "beforeEnd",
      ui = div(
        fluidRow(
          column(width=4, selectInput(paste0("type", new_id), label = "", choices= list("choice1" = 1,"choice2" = 2, "choice3"=3))),
          column(width=4, numericInput(paste0("quantity", new_id), label = "", value = 0, min=0))
        )
      )
    )
  })
}

shinyApp(ui = ui, server = server)

关键改进点 #

• 用reactiveValues替代全局变量，避免多用户场景下的状态冲突。
• 用insertUI动态插入单个输入行，仅在点击添加按钮时执行，不会因输入操作触发重新渲染。
• 新增输入框的状态由Shiny自动跟踪，无需手动读取input值维持状态，代码更简洁可靠。

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