Close a specific modalDialog in R shiny

Question

I have a a scenario in my app that matches the situation in the dummy app below. What my real app does is show checkboxes in a dropdownmenu coming from a dropdownButton for every column available in a dataframe for the user to pick from for a model to run on. What I am trying to build is a modalDialog that is triggered on hover, that shows a plot of the data in that column on which the user hovers. At the moment, I got all of that working, but there is one problem remaining:

If the user closes the modal with the histogram, the dialog window of the dropdownbutton also disappears. How to make only the plot dialog to close, while keeping the one with all the checkboxes open?

here is a dummy app with the problem:

library(shiny)
library(shinyjs)

shinyApp(


  ui = fluidPage(
    useShinyjs(),

        dropdownButton(label = "CLICK",
                       h5("This is the dropdownbutton window" ),
          checkboxInput("Checker", "Hover for modal dialog"),
          icon = icon("tasks"),
          inputId = "MYDDMbut",
          circle = T, 
          status = "info", 
          tooltip = tooltipOptions(title = "Click to open window"), width = "400px")
  ),

    server =  function(input, output, session) {
    output$distPlot <- renderPlot({
        hist(mtcars$disp)
    })


    onevent('mouseover','Checker',{
      delay(1000, 
            showModal(div(id="ModalDiv", modalDialog(
              inputId = "distPlot",
              title = HTML('<span style="color:#339fff; font-size: 20px; font-weight:bold; font-family:sans-serif ">Current data column<span>
                           <button type = "button" class="close" data-dismiss="modal" ">
                           <span style="color:#339fff; ">x <span>
                           </button> '),
              br(),
              plotOutput("distPlot"),
              br(),
              easyClose = TRUE,
              footer = NULL ))))
      print("2")}, T)
  }
    )

score 6 · Accepted Answer · edited Feb 02 '18 at 14:12

6

I remove the close cross on the modal & add a OK button on the fotter and put an observeEvent on it.

library(shiny)
library(shinyjs)
library(shinyWidgets)

shinyApp(


    ui = fluidPage(
        useShinyjs(),

        dropdownButton(label = "CLICK",
                       h5("This is the dropdownbutton window" ),
                       checkboxInput("Checker", "Hover for modal dialog"),
                       icon = icon("tasks"),
                       inputId = "MYDDMbut",
                       circle = T, 
                       status = "info", 
                       tooltip = tooltipOptions(title = "Click to open window"), width = "400px")
    ),

    server =  function(input, output, session) {
        output$distPlot <- renderPlot({
            hist(mtcars$disp)
        })


        onevent('mouseover','Checker',{
                 showModal(div(id="ModalDiv", modalDialog(
                      inputId = "distPlot",
                      title = HTML('<span style="color:#339fff; font-size: 20px; font-weight:bold; font-family:sans-serif ">Current data column<span>'),
                      br(),
                      plotOutput("distPlot"),
                      footer = tagList(actionButton("close", "OK")) )))
            print("2")}, T)

        observeEvent(input$close, {
            removeModal()
            toggleDropdownButton(inputId = "MYDDMbut")
        })
    }
        )

edited Feb 02 '18 at 14:12

Mark

2,789
1
26
66

answered Feb 01 '18 at 19:01

qfazille

1,643
13
27

hey thank you qfazille! I was trying the removemodal with an observe as well, didn't manage to find out about the existence of toggleDropdownButton though, which was exactly what I was looking to achieve. Many thanks! – Mark Feb 01 '18 at 19:20
is there also a way to stop the easyclose of the dropdownButton you know off, and force the user to click a close button in that one too? There is a situation possible now where the Plot modal is open, and the other one closed because of clicking outside it. – Mark Feb 01 '18 at 19:25
I'm not sure I understood your remark. Do you mean that a modal can be close with an other way of the actionButton on the footer ? – qfazille Feb 02 '18 at 10:11
No I mean that the bottom modal coming from the dropdowbutton now closes if you click outside it, or outside the second modal. Which I don't want to happen – Mark Feb 02 '18 at 11:13
Looks like this is the normal behavior of dropdownButton. I checked on its option but I didn't find a parameters that could allow us to disable this behavior. – qfazille Feb 02 '18 at 11:17
I have spoken with the builder of shinywidgets, he is looking into adding that for me – Mark Feb 02 '18 at 11:22
another bug in my code is that the delay works the wrong way. It waits to show the modal for a second, rather than only triggering when you hover on 1 spot for 1 second. – Mark Feb 02 '18 at 11:23
Embarassing.. I think that you could try to make a reproductible example and post it as another question – qfazille Feb 02 '18 at 12:00
for now I will use no delay. Once i have time I will investigate further. Probably need to ask someone like Dean Attali – Mark Feb 02 '18 at 14:15

Close a specific modalDialog in R shiny

1 Answers1