'selectize-plugin-a11y' is causing 'updateSelectInput()' to break when using a DT with filter option

[daattali]

Sample code to reproduce using latest dev version of shiny:

library(shiny)

ui <- fluidPage(
  selectInput("test", "test", choices = LETTERS[1:5]),
  actionButton("go", "go"),
  DT::DTOutput("table")
)

server <- function(input, output, session) {
  observeEvent(input$go, {
    updateSelectInput(session, "test", choices = letters[6:10])
  })

  output$table <- DT::renderDT({
    DT::datatable(mtcars, filter = "top")
  })
}

shinyApp(ui, server)

When you click "go" to update the selectInput, it become a plain HTML selectbox (see screenshot below) and a JS error in the console comes up:

VM35:2 Uncaught Error: Unable to find "selectize-plugin-a11y" plugin
    at L.a.loadPlugin (<anonymous>:2:4581)
    at L.a.require (<anonymous>:2:4888)
    at L.a.initializePlugins (<anonymous>:2:4450)
    at new L (<anonymous>:2:10781)
    at HTMLSelectElement.<anonymous> (<anonymous>:3:5531)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.a.fn.selectize (<anonymous>:3:5249)
    at exports.InputBinding._selectize (input_binding_select.js:199)
    at exports.InputBinding.receiveMessage (input_binding_select.js:62)

Notes:

• The problem does not happen if the filter argument of DT is not used. It's possible that other javascript libraries would also break the new selectInput due to similar issues.
• The problem does not exist in the current CRAN version 1.5.0

[bhogan-mitre]

FWIW, I am still running into this with shiny 1.6. It shows up occasionally, and apparently depending on the sequence with which different parts of the app are rendered. I think the error is reproducible if a data table is rendered prior to a select input being rendered. The error does not appear to show up if a select input is rendered prior to a data table being rendered. I'll try to confirm this and put together a reprex later.

[danbartl]

Unfortunately still open.
Here is a reprex:

Commenting out either filter option in datatable or selectizeInput will give a correct dateInput, but if not dateinput does not initialize correctly. I took a look at the console in Chrome and it writes uncaught Error: Unable to find "selectize-plugin-a11y" plugin, see below

library(shiny)
library(DT)

ui <- fluidPage(
      actionButton("test","Test"),
      DT::dataTableOutput("dt_table")
)


server <- function(input, output, session) {
   
   
   observeEvent(input$test,
                {
                   shiny::showModal(
                      shiny::modalDialog(
                         shiny::selectizeInput(
                            "idName",
                            label = "variable",
                            choices = c("A","B"),
                            selected = "A",
                            options = list(create = F)
                         ),
                         shiny::dateInput(
                            "idName2",
                            label = "variable2",
                            value = as.Date("1980-01-01")
                         )
                         ,
                         size = "l"
                      )
                   )
                   
                })
   
   output$dt_table <- renderDataTable({
     
      datatable(iris,
                selection = "single"
                ,
                filter="top"
                )
      
      
   })
}

SessionInfo:
R version 4.0.3 (2020-10-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17763)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.1252 LC_CTYPE=German_Germany.1252 LC_MONETARY=German_Germany.1252 LC_NUMERIC=C
[5] LC_TIME=German_Germany.1252

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] DT_0.17 shiny_1.6.0

loaded via a namespace (and not attached):
[1] Rcpp_1.0.5 digest_0.6.25 later_1.1.0.1 mime_0.9 R6_2.4.1 jsonlite_1.7.1 lifecycle_0.2.0 xtable_1.8-4
[9] magrittr_1.5 cachem_1.0.3 rlang_0.4.10 promises_1.1.1 jquerylib_0.1.3 bslib_0.2.4 ellipsis_0.3.1 tools_4.0.3
[17] htmlwidgets_1.5.2 crosstalk_1.1.0.1 yaml_2.2.1 httpuv_1.5.4 fastmap_1.0.1 compiler_4.0.3 htmltools_0.5.1.1 sass_0.3.1

uncaught Error: Unable to find "selectize-plugin-a11y" plugin
at L.a.loadPlugin (:2:4581)
at L.a.require (:2:4888)
at L.a.initializePlugins (:2:4450)
at new L (:2:10781)
at HTMLSelectElement. (:3:5531)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.a.fn.selectize (:3:5249)
at exports.InputBinding._selectize (input_binding_select.js:199)
at exports.InputBinding.initialize (input_binding_select.js:148)

[jsinnett]

I'm running into the same issue as above and as of now my solution is to either remove "filter" or update all instances of "selectInput" on my app to a different input like "pickerInput". Since my app is rather large, I'm opting to exclude 'filter' instead of updating all the selectInputs and re-working the UI.

[cpsievert]

Thanks for the reprex @dbart79. It appears your issue is subtly different from @daattali's (which was indeed fixed by #3155). Until we have proper fix for your issue, a workaround is to place the HTML dependencies of selectizeInput() into the UI:

ui <- fluidPage(
  htmltools::findDependencies(selectizeInput("foo", "bar", choices = "a")),
  actionButton("test","Test"),
  DT::dataTableOutput("dt_table")
)

[kuzmenkov111]

@cpsievert Hello! Is any news about this issue?

[daattali]

It seems this is a slightly more general problem than what I originally reported. I believe that if a DT::datatable() gets rendered with a filter parameter, then any select inputs that get rendered afterwards cause a javascript error. See below as an example.

library(shiny)

ui <- fluidPage(
  DT::dataTableOutput("table"),
  uiOutput("out")
)

server <- function(input, output, session) {
  output$table <- DT::renderDataTable({
    DT::datatable(cars, filter = "top")
  })

  output$out <- renderUI({
    selectInput("num", "num", 1:5)
  })
}

shinyApp(ui, server)

This results in a javascript error and the input not rendering correctly.

This is a bigger problem than just the input, it affects the entire app afterwards. As you can see in the following example, I cannot dismiss a modal because of this error:

library(shiny)

ui <- fluidPage(
  actionButton("test", "test"),
  DT::dataTableOutput("table")
)

server <- function(input, output, session) {
  output$table <- DT::renderDataTable({
    DT::datatable(cars, filter = "top")
  })

  observeEvent(input$test,{
    showModal(
      modalDialog(
        selectInput("num", "num", 1:5),
        actionButton("dismiss", "Dismiss"),
        footer = NULL
      )
    )
  })
  
  observeEvent(input$dismiss, {
    removeModal()
  })
}

shinyApp(ui, server)

The only workaround I can find right now is forcing the dependency to get added to the UI using htmltools::findDependencies(selectInput("test", "test", NULL)),

[matton2]

Not sure if this is helpful but the shinyWidgets::pickerInput still works as expected.

library(shiny)
# library(shinyWidgets)
# library(DT)

shinyApp(
  ui = fluidPage(
    actionButton("test", "test"),
    DT::dataTableOutput("table")
  ),
  
  server = function(input, output, session) {
    output$table <- DT::renderDataTable({
      DT::datatable(cars, filter = "top")
    })
    
    observeEvent(input$test,{
      showModal(
        modalDialog(
          shinyWidgets::pickerInput("num", "num", 1:5),
          actionButton("dismiss", "Dismiss"),
          footer = NULL
        )
      )
    })
    
    observeEvent(input$dismiss, {
      removeModal()
    })
  }
)

[phoward38]

Another workaround is setting the argument selectize = FALSE in selectInput

[Jareem7]

Thanks for that workaround phoward38 - simple and worked a treat!!!

[jb4utista]

Thanks!, another workaround with images!,

[cpsievert]

Appears this is fixed now, probably as a result of #3358

[philibe]

Thanks @daattali.

In your example to put findDependencies(selectInput(..)) resolves the error Error: Unable to find "selectize-plugin-a11y" plugin.

(Same fix for selectizeInput() if exists issue)

ui <- fluidPage(
  tags$head(htmltools::findDependencies(selectInput("toto", "toto", choices=NULL))),
  actionButton("test", "test"),
  DT::dataTableOutput("table")
)

sessionInfo() : in particular shiny_1.8.1.1, DT_0.31

sessionInfo() R version 4.3.3 (2024-02-29) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Ubuntu 22.04.3 LTS

Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.10.0
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.10.0

locale:
[1] LC_CTYPE=fr_FR.UTF-8 LC_NUMERIC=C LC_TIME=fr_FR.UTF-8 LC_COLLATE=fr_FR.UTF-8 LC_MONETARY=fr_FR.UTF-8
[6] LC_MESSAGES=fr_FR.UTF-8 LC_PAPER=fr_FR.UTF-8 LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C
[11] LC_MEASUREMENT=fr_FR.UTF-8 LC_IDENTIFICATION=C

time zone: Europe/Paris
tzcode source: system (glibc)

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] htmltools_0.5.7 cowplot_1.1.3 ggforce_0.4.1 DescTools_0.99.53 DT_0.31 shinyBS_0.61.1
[7] shinyjs_2.1.0 shiny_1.8.1.1 docopt_0.7.1 tidytext_0.4.1 statnet.common_4.9.0 lubridate_1.9.3
[13] forcats_1.0.0 stringr_1.5.1 dplyr_1.1.4 purrr_1.0.2 readr_2.1.5 tidyr_1.3.1
[19] tibble_3.2.1 ggplot2_3.4.4 tidyverse_2.0.0 dbplyr_2.4.0 glue_1.7.0 odbc_1.4.2
[25] DBI_1.2.1 R6_2.5.1

loaded via a namespace (and not attached):
[1] gld_2.6.6 readxl_1.4.3 rlang_1.1.3 magrittr_2.0.3 e1071_1.7-9 compiler_4.3.3 callr_3.7.3
[8] vctrs_0.6.5 pkgconfig_2.0.3 fastmap_1.1.1 ellipsis_0.3.2 utf8_1.2.2 promises_1.2.0.1 rmarkdown_2.25
[15] tzdb_0.4.0 ps_1.7.6 bit_4.0.4 xfun_0.41 reprex_2.1.0 cachem_1.0.6 jsonlite_1.8.8
[22] blob_1.2.2 SnowballC_0.7.1 later_1.3.0 styler_1.10.2 tweenr_2.0.2 bslib_0.6.1 stringi_1.7.6
[29] boot_1.3-30 jquerylib_0.1.4 cellranger_1.1.0 Rcpp_1.0.12 knitr_1.45 R.utils_2.12.3 httpuv_1.6.5
[36] Matrix_1.6-5 R.cache_0.16.0 timechange_0.3.0 tidyselect_1.2.0 rstudioapi_0.15.0 yaml_2.3.5 miniUI_0.1.1.1
[43] processx_3.8.3 lattice_0.22-5 withr_3.0.0 coda_0.19-4 evaluate_0.23 proxy_0.4-26 polyclip_1.10-0
[50] pillar_1.9.0 janeaustenr_1.0.0 generics_0.1.2 hms_1.1.3 munsell_0.5.0 scales_1.3.0 rootSolve_1.8.2.4
[57] xtable_1.8-4 class_7.3-22 lmom_3.0 tools_4.3.3 data.table_1.14.10 tokenizers_0.3.0 Exact_3.2
[64] fs_1.6.3 mvtnorm_1.1-3 grid_4.3.3 crosstalk_1.2.0 colorspace_2.1-0 cli_3.6.2 fansi_1.0.2
[71] expm_0.999-9 gtable_0.3.0 R.methodsS3_1.8.2 sass_0.4.8 digest_0.6.34 htmlwidgets_1.6.4 farver_2.1.0
[78] memoise_2.0.1 R.oo_1.26.0 lifecycle_1.0.4 httr_1.4.7 mime_0.12 bit64_4.0.5 MASS_7.3-60

[udurraniAtPresage]

I see this issue in my deployed app. The whole thing broke down all of a sudden. There is no issue when I run the app locally.

Is tags$head(htmltools::findDependencies(selectInput("toto", "toto", choices=NULL))) still the fix?