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

Posted 2023-03-22

【中文标题】渲染 rhandsontable 后，日期选择器显示在模态对话框后面

【英文标题】：Date picker shows behind modal dialog after rendering rhandsontable

【发布时间】：2020-10-13 07:45:14

【问题描述】：

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

我正在使用 1.4.0.2 版的 shiny 和 0.3.7 版的 rhandsontable。

感谢任何建议！

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)

【参考方案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)