Skip to content

[shiny] DT with select filters breaks Shiny apps that don't initially have a selectize input but later use oneΒ #1174

@gadenbuie

Description

@gadenbuie

Reported here Action button failure in modal dialog - shiny - Posit Community, I can reproduce the issue when

  1. The app has a DT table with a categorical filter
  2. The app does not have a selectizeInput() on the page at load
  3. The app adds content, e.g. a modal, that does use selectizeInput()
library(shiny)
library(bslib)
library(DT)

ui <- page_fluid(
  title = "Simple Modal Debug App",
  
  card(
    card_header("Modal Debug App"),
    card_body(
      # COMMENT OUT THE LINE BELOW TO BREAK THE APP
      selectInput("test", "Test", LETTERS[1:3]),
      p(
        "Click the button below to open a modal dialog with a select input.",
        "The app works if there's a selectize input on the page before the modal is opened.",
        "Otherwise, opening the modal causes issues."
      ),
      actionButton("open_modal", "Open Modal", class = "btn-primary")
    )
  ),
  
  card(
    card_header("Data Table"),
    card_body(
      # DT WITH FILTERS IS REQUIRED FOR THE BUG TO HAPPEN
      DT::dataTableOutput("debug_table")
    )
  )
)

server <- function(input, output, session) {
  
  # Create sample data for the table
  sample_data <- data.frame(
    ID = 1:10,
    Name = paste("Item", 1:10),
    Value = round(runif(10, 1, 100), 2),
    Category = sample(c("A", "B", "C"), 10, replace = TRUE),
    stringsAsFactors = FALSE
  )
  
  # Render the DT table with column filters
  output$debug_table <- DT::renderDataTable({
    DT::datatable(
      sample_data,
      filter = "top",  # Add column filters at the top
      options = list(
        pageLength = 5,
        scrollX = TRUE
      ),
      selection = "single"
    )
  })
  
  # Open modal when button is clicked
  observeEvent(input$open_modal, {
    showModal(
      modalDialog(
        title = "Debug Modal",
        
        selectInput(
          inputId = "modal_select",
          label = "Choose an option:",
          choices = LETTERS[1:3]
        ),
        
        footer = tagList(
          modalButton("Cancel"),
          actionButton("modal_ok", "OK", class = "btn-primary")
        )
      )
    )
  })
  
  # Handle OK button in modal
  observeEvent(input$modal_ok, {
    removeModal()
  })
}

shinyApp(ui = ui, server = server)

The error reproduces on shinylive.io

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions