Установите фокус в приложении Shiny на указанный элемент пользовательского интерфейса c при загрузке

Question

После того, как мое приложение R Shiny загрузилось, я хотел бы установить фокус на элемент selectInput, чтобы пользователь мог сразу же выбрать элемент с помощью стрелок вверх и нажать Enter.

Я был пытаясь захватить событие JavaScript load, отправить его в R и затем использовать Shiny.addCustomMessageHandler для установки фокуса элемента selectInput.

В качестве промежуточного шага я также пытался используйте событие click из actionButton, чтобы активировать фокус элемента. Хотя я думаю, что большинство частей должно быть в коде, событие load не передается на сервер, а часть фокуса получает JavaScript.

Этот пост фокусировка курсора в textArea после нажатия кнопки действия в блестящем также не помогло мне достаточно, чтобы перевести ее в строку fini sh.

Это то, что я до сих пор:

library(shiny)
ui <- fluidPage(
  tags$head(tags$script('
    window.addEventListener("load", function(){
      alert("Loaded");
      Shiny.setInputValue("loaded", 1) // new identical function to Shiny.onInputChange
    });
 ')),
  tags$head(tags$script('
    Shiny.addCustomMessageHandler("focus", function(null) {
      document.getElementById("select").focus()
    });  
 ')),
  headerPanel("Focus",  windowTitle = "Focus"),
  fluidRow(
    column(width = 2, class = "panel",
           selectInput("select", label = "Your Choice", choices = c("Choice 1", "Choice 2"), selectize = TRUE),
           actionButton("click", "Click")
    ),
    column(width = 10,
           textOutput("text")
    )
  )
)

server = function(input, output, session) {

  observeEvent(input$loaded, {
    session$sendCustomMessage("focus",list(NULL))
    print("Loaded")
  })

  observeEvent(input$select, {
    print("Selected")
  })

  observeEvent(input$click, {
    session$sendCustomMessage("focus",list(NULL))
    print("Clicked")
  })

  output$text <- renderText({

  })
}

shinyApp(ui = ui, server = server)

Спасибо за вашу помощь.

Answer 1

Откройте консоль (Ctrl + Shift + i с Chrome), вы увидите, что в вашем коде JS есть некоторые ошибки.

Основная из них в том, что shiny еще не готов когда вы открываете приложение, поэтому функция Shiny.setInputValue не найдена.

Чтобы быть уверенным, что shiny готово, используйте:

$(document).on("shiny:connected", function(){
  ......
});

Теперь, после нескольких испытаний, я обнаружил, что элемент, который должен быть «сфокусирован», - это не весь элемент select. Это его div подэлемент с классом selectize-input, который вы можете выбрать с помощью $("#select ~ .selectize-control > .selectize-input").

Наконец, хорошее действие для выполнения - это не focus, а click. Вот полное приложение:

library(shiny)

js <- '
$(document).on("shiny:connected", function(){
  alert("Loaded");
  Shiny.setInputValue("loaded", 1);
  Shiny.addCustomMessageHandler("focus", function(x){
    $("#select ~ .selectize-control > .selectize-input").click();
  });
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  headerPanel("Focus",  windowTitle = "Focus"),
  fluidRow(
    column(width = 2, class = "panel",
           selectInput("select", label = "Your Choice", 
                       choices = c("Choice 1", "Choice 2"), selectize = TRUE),
           actionButton("click", "Click")
    ),
    column(width = 10,
           textOutput("text")
    )
  )
)

server = function(input, output, session) {

  observeEvent(input$loaded, {
    session$sendCustomMessage("focus", list(NULL))
    print("Loaded")
  })

  observeEvent(input$select, {
    print("Selected")
  })

  observeEvent(input$click, {
    session$sendCustomMessage("focus", list(NULL))
    print("Clicked")
  })

  output$text <- renderText({

  })
}

shinyApp(ui = ui, server = server)