selectizeInput 的奇怪行为

Question

在下面的 Shiny App 中，我遇到了一个非常奇怪的行为，当我在此框中键入内容时，selectInput 框会向下滑动。此外，当我在此框中键入时，selectInput 框中的文本向右移动。我花了很多时间找出这个问题的原因，但无法弄清楚。有人可以指出我造成这种奇怪行为的错误吗？

library(shiny)
library(shinydashboard)
library(highcharter)

siderbar <- dashboardSidebar(
  sidebarMenu(
    selectizeInput(inputId = "select_by", label = "Select by:", choices = NULL, multiple = FALSE, options = NULL)
  )   
)

body <- dashboardBody(
  fluidRow(
    tabBox(
      side = "right",
      selected = "Tab1",
      tabPanel("Tab1", "Tab content 1", highchartOutput("tabset1Selected"))
    )
  ),
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    siderbar,
    body
  ),
  server = function(input, output, session) {
    
    selectedVal <- reactiveValues()
    
    updateSelectizeInput(session, "select_by", choices = c(as.character(1:10000)), selected = 2, server = TRUE)
    
    output$tabset1Selected <- renderHighchart({
      selectedVal <- input$select_by
      print(highcharts_demo())
    })
    
  }
)

Answer 1

我们走在正确的轨道上。它与 selectize.js 从服务器更新项目有关。您可以通过将 loadThrottle 选项设置为 5000 来验证这一点。此选项确定小部件“在从服务器请求选项之前”等待的时间（请参阅 the manual）。现在您必须等待 5 秒，然后 select 小部件闪烁。

问题似乎是由 CSS 冲突引起的。 selectize.js 向小部件添加 CSS class。如果删除该功能，闪烁就会消失。

selectizeInput(inputId = "select_by", label = "Select by:", 
               choices = NULL, multiple = FALSE, 
               options = list(loadThrottle=200, loadingClass=""))

loadingClass 在从服务器加载数据时设置特定的 CSS class（默认值：'loading'）。目的：更改小部件的外观并向用户传达更新正在进行中。
loadThrottle不需要设置。默认值为 300。您可以将其设置为适合您需要的任何值。

详情

highcharter 定义它自己的 CSS class 名称 loading 具有这些规格：

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

这就是 CSS 冲突的原因。小部件获得顶部边距并将其内容移动到中心，因为浏览器不区分 class 的来源。它只看到一些适合并使用它的CSS。此图显示了您需要查看的位置：

selectizeInput 的奇怪行为

Weird behavior of selectizeInput

r

shiny