Rhandsontable context menu not displayed within Shiny Modal

chasec · September 26, 2018, 1:43pm

As there was a related issue in the rhandsontable github I also submitted this there (https://github.com/jrowen/rhandsontable/issues/260#issuecomment-424717589), but I'm not sure whether it's something to do with rhandsontable, or how modals work in Shiny, or...more likely.... my setup ¯_(ツ)_/¯

The problem is when rhandsontable is within a modal dialog the right-click context menu is not displayed.
Reprex below:



library(shiny)
library(rhandsontable)

hierMetaOutput <- function(id) {
  ns <- NS(id)
  tagList(
    rHandsontableOutput(ns("metaTable"))
  )
}

hierMeta <- function(input, output, session, sampleIDs) {
                output$metaTable <- rhandsontable::renderRHandsontable({
                  currentlyLoadedSamples <-  data.frame(Strain_ID = sampleIDs,
                                                        `Property 1` = rep("", length(sampleIDs)))
                  rhandsontable::rhandsontable(currentlyLoadedSamples)
                })
            }

ui <- fluidPage(
   sidebarLayout(
      sidebarPanel(
        IDBacApp::hierMetaOutput("datae")

      ),
      mainPanel(
        actionButton("popup", "Click Me"),
         plotOutput("distPlot")
      )
   )
)

server <- function(input, output) {

  yep <- callModule(IDBacApp::hierMeta, "datae", sampleIDs = letters[1:5])
  datafile <- callModule(IDBacApp::hierMeta, "datafile",sampleIDs = letters[1:5])

  observeEvent(input$popup, {
    showModal(modalDialog(IDBacApp::hierMetaOutput("datafile"),
                          size="l"))
  })
}

shinyApp(ui = ui, server = server)

barret · September 27, 2018, 3:36pm

Hi @chasec

Where is the IDBacApp library so that I can run this as well? With an existing issue in rhandsontable, I'm going to guess the issue is there and not in your setup.

- Barret

chasec · September 27, 2018, 11:44pm

Thanks! My bad. I reduced those functions and put them at the top of the app above. You should be able to just remove IDBacApp:: . I'll test that to make sure when I get to my computer.

chasec · September 28, 2018, 1:56pm

Updated reprex:


library(shiny)
library(rhandsontable)

hierMetaOutput <- function(id) {
  ns <- NS(id)
  tagList(
    rHandsontableOutput(ns("metaTable"))
  )
}

hierMeta <- function(input, output, session, sampleIDs) {
  output$metaTable <- rhandsontable::renderRHandsontable({
    currentlyLoadedSamples <-  data.frame(Strain_ID = sampleIDs,
                                          `Property 1` = rep("", length(sampleIDs)))
    rhandsontable::rhandsontable(currentlyLoadedSamples)
  })
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      hierMetaOutput("datae")
      
    ),
    mainPanel(
      actionButton("popup", "Click Me"),
      plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  
  yep <- callModule(hierMeta, "datae", sampleIDs = letters[1:5])
  datafile <- callModule(hierMeta, "datafile",sampleIDs = letters[1:5])
  
  observeEvent(input$popup, {
    showModal(modalDialog(hierMetaOutput("datafile"),
                          size="l"))
  })
}

shinyApp(ui = ui, server = server)

barret · September 28, 2018, 2:30pm

Thanks for the update!

The table was being displayed, it was just behind the modal box.

handsontable currently sets a z-index (which controls what html elements are placed on top of each other) that is not high enough when used inside a modal dialog.

The modal has a z-index of 1050. If we set the helper table to have a z-index, say, 1051, it'll be placed on top of the modal.

Updated ui code to make the helper table appear on top of the modal dialog...

ui <- fluidPage(
  tags$style(HTML(".htMenu { z-index: 1051; }")),
  sidebarLayout(
    sidebarPanel(
      hierMetaOutput("datae")
      
    ),
    mainPanel(
      actionButton("popup", "Click Me"),
      plotOutput("distPlot")
    )
  )
)