'selectize-plugin-a11y' error if a DT table (with filter) is displayed before a modal containing 'selectInput'

[elaouniyassine]

System details

Browser Version: Google Chrome, 131.0.6778.205

Output of sessionInfo():

R version 4.4.1 (2024-06-14 ucrt)
Platform: x86_64-w64-mingw32/x64
Running under: Windows 10 x64 (build 19045)

Matrix products: default


locale:
[1] LC_COLLATE=French_France.utf8  LC_CTYPE=French_France.utf8    LC_MONETARY=French_France.utf8
[4] LC_NUMERIC=C                   LC_TIME=French_France.utf8    

time zone: Africa/Casablanca
tzcode source: internal

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

other attached packages:
[1] DT_0.33      shiny_1.10.0

loaded via a namespace (and not attached):
 [1] digest_0.6.36     later_1.3.2       R6_2.5.1          httpuv_1.6.15     fastmap_1.2.0    
 [6] magrittr_2.0.3    cachem_1.1.0      memoise_2.0.1     htmltools_0.5.8.1 lifecycle_1.0.4  
[11] promises_1.3.2    cli_3.6.3         xtable_1.8-4      sass_0.4.9        jquerylib_0.1.4  
[16] pkgload_1.4.0     compiler_4.4.1    rstudioapi_0.17.1 tools_4.4.1       bslib_0.8.0      
[21] mime_0.12         yaml_2.3.9        Rcpp_1.0.12       jsonlite_1.8.8    htmlwidgets_1.6.4
[26] rlang_1.1.4       crosstalk_1.2.1  

Example application to reproduce the problem

library(shiny)
library(DT)

ui <- fluidPage(
  actionButton("open_modal", "Open Modal"),
  DTOutput("iris_table")
)

server <- function(input, output, session) {
  observeEvent(input$open_modal, {
    showModal(
      modalDialog(
        title = "Select Input Example",
        selectInput("variable", "Choose a Variable:", choices = names(iris)),
        footer = actionButton("close_modal", "Close Modal")
      )
    )
  })
  
  observeEvent(input$close_modal, {
    removeModal()
  })
  
  output$iris_table <- renderDT({
    datatable(iris, filter = "top")
  })
}

shinyApp(ui, server)

Problem description

In a Shiny app with a DT table that uses filter argument and a modal containing a selectInput, a console error referencing 'selectize-plugin-a11y' appears if the table is rendered first and then the modal is opened. This error also breaks the server, preventing the modal from being closed.
However, if the DT is inside the modal and the 'selectInput' is outside, no error occurs, suggesting that the rendering order triggers the plugin problem.

shinyapp.ts:456 Error: Unable to find "selectize-plugin-a11y" plugin
    at a.loadPlugin (<anonymous>:2:4581)
    at a.require (<anonymous>:2:4888)
    at a.initializePlugins (<anonymous>:2:4450)
    at new L (<anonymous>:2:10781)
    at HTMLSelectElement.<anonymous> (<anonymous>:3:5531)
    at Function.each (jquery.min.js:2:3003)
    at S.each (jquery.min.js:2:1481)
    at a.fn.selectize (<anonymous>:3:5249)
    at t.value (selectInput.ts:278:25)
    at t.value (selectInput.ts:233:12)

Notes:

• The problem only occurs only when filter argument is set in DT.
• Using selectize = FALSE prevents the issue.

[philibe]

Maybe related to #3125

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

Look for the use of htmltools::findDependencies in this 3125 issue, and try it in your issue.

[gadenbuie]

Thanks for opening a new issue @elaouniyassine. It turns out this was reported in rstudio/DT#1112. There's a workaround mentioned in that thread, to use

htmltools::findDependencies(selectizeInput("foo", "Foo", choices = NULL))

in the app UI to ensure that Shiny's selectize dependency is used over the older selectize dependency bundled in DT.

[elaouniyassine]

Thank you for the suggestion and for pointing me to the workaround.
I can confirm that using htmltools::findDependencies(selectizeInput("foo", "Foo", choices = NULL)) in the app UI works perfectly!

Previously, I was using a hidden selectInput in the UI to force the Shiny's selectize dependency to load before the DT's one, but this approach is much cleaner. I appreciate the help!