渲染 rhandsontable 后，日期选择器显示在模态对话框后面

Question

我在 Shiny 应用程序中使用手控表和模态对话框，两者似乎彼此不喜欢。更具体地说，一旦通过 rhandsontableOutput 生成了一个 handsontable，使用 jQuery 的模态对话框中的输入就会表现得很奇怪。有关可重现的示例，请参见下文。您会注意到，在调用 handsontable 之前，一切正常，但是一旦勾选了复选框，日期选择器就会出现在模式对话框后面（之前提出了类似的问题 here，但不是在 handsontables 的上下文中）。请注意，我有意使用这种稍微奇怪的方式通过 renderUI 呈现 handsontable，以确保只要未勾选复选框，模态就可以正常工作。

我使用的是 shiny 1.4.0.2 版和 rhandsontable 0.3.7 版。

感谢任何建议！

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  helpText("Click this first. Date picker should work fine."),
  actionButton("show", "Show modal"),
  hr(),
  helpText("Now click below to render the handsontable. When showing the modal again, the date picker shows up behind the modal."),
  checkboxInput("showHot", "Show handsontable"),
  uiOutput("hot_rendered")
)

server <- function(input, output, session) {
  # Modal:
  observeEvent(input$show, {
    showModal(
      modalDialog(
        title = "My Modal",
        dateInput("date", "Choose date")
      )
    )
  })
  # Handsontable:
  output$hot_rendered = renderUI({
    req(input$showHot==T)
    rHandsontableOutput("hot")
  })
  output$hot = renderRHandsontable({
    req(input$showHot==T)
    rhandsontable(head(iris))
  })
}

shinyApp(ui, server)

Answer 1

我认为这是一个已知问题 https://github.com/rstudio/shiny/issues/914，您可以自行调整 z-index：

library(shiny)
library(rhandsontable)

ui <- fluidPage(
    tags$style(HTML(".datepicker {z-index:99999 !important;}")),

    helpText("Click this first. Date picker should work fine."),
    actionButton("show", "Show modal"),
    hr(),
    helpText("Now click below to render the handsontable. When showing the modal again, the date picker shows up behind the modal."),
    checkboxInput("showHot", "Show handsontable"),
    uiOutput("hot_rendered")
    )

server <- function(input, output, session) {
    # Modal:
    observeEvent(input$show, {
        showModal(
            modalDialog(
                title = "My Modal",
                dateInput("date", "Choose date")
            )
        )
    })
    # Handsontable:
    output$hot_rendered = renderUI({
        req(input$showHot==T)
        rHandsontableOutput("hot")
    })
    output$hot = renderRHandsontable({
        req(input$showHot==T)
        rhandsontable(head(iris))
    })
}

shinyApp(ui, server)

渲染 rhandsontable 后，日期选择器显示在模态对话框后面

Date picker shows behind modal dialog after rendering rhandsontable

jquery

r

modal-dialog

handsontable

shiny