When semantic_DT is used inside a modal, the opening of the modal is triggering a focus event on the table's dropdown

[federiva]

This issue can be reproduced using the code below
Possibly related to #311?

library(shiny)
library(shiny.semantic)
library(DT)

ui <- function() {
  shiny.semantic::semanticPage(
    shiny::tagList(
      shiny.semantic::segment(
        h1("Click the button below"),
        shiny.semantic::action_button("click_me", "Click me", class = "fluid"),
        modal(
          content = shiny::tagList(
            div(
              h3("Testing issue")
            ),
            div(
              shiny.semantic::semantic_DTOutput("table")
            )
          ),
          header = "Dropdown issue on table",
          id = "modal",
          target = "click_me",
          settings = list(c("closable", "true"))
        )
      )
    )
  )  
}

server <- function(input, output, sesion) {
  output$table <- DT::renderDataTable(
    shiny.semantic::semantic_DT(
      data.frame("column a" = rnorm(20))
    )
  )
}

shiny::shinyApp(ui, server)

[anirbanshaw24]

Hi,
The problem is due to a default behavior of semantic UI modal to set autofocus to true and to the first element within the modal. This can be solved easily by changing the modal autofocus to FALSE.

Just add this line in the list of settings provided to modal fuction in ui.
c("autofocus", "false")

Full Code:

library(shiny)
library(shiny.semantic)
library(DT)

ui <- function() {
  shiny.semantic::semanticPage(
    shiny::tagList(
      shiny.semantic::segment(
        h1("Click the button below"),
        shiny.semantic::action_button("click_me", "Click me", class = "fluid"),
        modal(
          content = shiny::tagList(
            div(
              h3("Testing issue")
            ),
            div(
              shiny.semantic::semantic_DTOutput("table")
            )
          ),
          header = "Dropdown issue on table",
          id = "modal",
          target = "click_me",
          settings = list(c("closable", "true"), 
                          c("autofocus", "false"))
        )
      )
    )
  )  
}

server <- function(input, output, sesion) {
  output$table <- DT::renderDataTable(
    shiny.semantic::semantic_DT(
      data.frame("column a" = rnorm(20))
    )
  )
}

shiny::shinyApp(ui, server)