@calderonsamuel thank you for reporting the issue (and for the reproducible example!)

You are right with your diagnosis! It is caused by a large z-index number of the .empty-state-container class.

A way to fix your example is either:

1. Override the style for .empty-state-container and make the z-index attribute lower than the z-index attribute of the modal
2. Override the style of the modal and make the z-index attribute higher than the z-index attribute of the empty state container

Here is a code snippet for option no. 1:

library(shiny)
library(shiny.emptystate)

ui <- fluidPage(
  tags$style("
    .empty-state-container {
      z-index: 999;
    }
  "),
  use_empty_state(),
  actionButton("show", "Show empty state!"),
  actionButton("hide", "Hide empty state!"),
  actionButton("modal", "Show modal"),
  tableOutput("my_table")
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is  example empty state content"
  )
  
  empty_state_manager <- EmptyStateManager$new(
    id = "my_table",
    html_content = empty_state_content
  )
  
  observeEvent(input$show, empty_state_manager$show())
  
  observeEvent(input$hide, empty_state_manager$hide())
  
  observeEvent(input$modal, {
    showModal(modalDialog(title = "Hello from modal"))
  })
  
  output$my_table <- renderTable(mtcars)
}

shinyApp(ui, server)

It can be hard to pick the right z-index value for each situation as for example we might want to show spinners, or tooltips over empty state content and we may not know what their z-index value is.

I'd say a potential solution would be passing a z-index parameter to empty_state_manager and send it over to the JavaScript code that would set the z-index attribute of the empty-state container instead of having it hard coded. Happy to review a PR that implements that!

Let me know if that helps!