bug if used inside a modal

[ShinyFabio]

Hi again,
I've found a bug if I use the package inside a modal. Here's the code where you can reproduce the error. The bug appears if you try to change the column names or the row names.

if (interactive()) {
  ui <- fluidPage(
    actionButton("upaziendedata", "Aggiorna i dati"),
    shinyBS::bsModal("upaziendetab", "Tabella", trigger = "upaziendedata", size = "large",
    dataInputUI("input-1"),
    dataOutputUI("output-1"),
    dataEditUI("edit-1")
  ))
  
  server <- function(input, output, session) {
    data_to_edit <- dataInputServer("input-1")
    data_to_edit2 <- dataEditServer("edit-1",
                                    data = data_to_edit
    )
    dataOutputServer("output-1",
                     data = data_to_edit2
    )
  }
  
  shinyApp(ui, server)
}

I notice that you use the {rhandsontable} package. Maybe this can be useful:
https://stackoverflow.com/questions/52697624/handsontable-in-shiny-modal-does-not-render-properly

[DillonHammill]

This doesn't look like a rhandsontable issue. I suspect that it has something to do with the JavaScript code that I added to allow the editing of row/column headers - for some reason it is not being invoked within the modalDialog window. Due to my limited JS knowledge, I will need to ask for some external help if we are going to get this to work properly.

I remember @timelyportfolio helped me to get this JS code working a while back (jrowen/rhandsontable#344). Unfortunately I don't know anyone else who may be able to figure this one out. @timelyportfolio any chance that you would you be able to take a look at this when you get time? The relevant code is in the dataEdit module: https://github.com/DillonHammill/DataEditR/blob/master/R/dataEdit.R

[lgirola]

Hi,

I'm having issues with running rhandsontable from within a modal too.

When rhandsontable is rendered in a modal box, depending on the circumstance only a part of the table is rendered until the user clicks on the partially rendered table. Is this a bug, or am I using rhandsontable incorrectly? Please see super simple MWE code below. It renders the initial table just fine, but when the user makes a change to the table (for example inserting a row with data) and tries re-rendering it by clicking the "Show" action button, only part of the table is rendered until the user clicks on the table.

The first image below shows the rendered table when first invoking the app - looks good. The second image shows the rendered table after having inserted a row/data and then clicking "Show" -- I only get a partial rendering of the table until clicking on it, and then the complete table pops up (as it should have done after the "Show" click). The third images shows the completely and correctly rendered table after inserting a 3rd row, after clicking "Show", and after clicking on the partially rendered table.

library(shiny)
library(rhandsontable)

ui <- fluidPage(actionButton("show","Show"), 
                actionButton("reset","Reset"))

server <- function(input,output,session){

  dat <- reactiveVal(data.frame(x=runif(2),y=runif(2)))
  
  observeEvent(input$show,{showModal(modalDialog(rHandsontableOutput("hot")))})
  
  observeEvent(input$reset,dat(data.frame(x=runif(2),y=runif(2))))
  
  output$hot <- renderRHandsontable(rhandsontable(dat()))

  } # close Server

shinyApp(ui,server)

[lgirola]

Thank you Dillon,  that works nicely. However, note that clicking the "Reset" button should cause the table to revert back to 2 columns/rows of random variables eliminating all user changes to the table.  With your changes, Reset no longer works. In this original MWE code immediately below, clicking "Reset" removes all the user inputs and reverts back to the original 2x2, but again with that same problem of not re-rendering the complete table when calling it back. library(shiny) library(rhandsontable) ui <- fluidPage(actionButton("show", "Show"),                 actionButton("reset", "Reset")) server <- function(input, output, session) {   dat <- reactiveVal(data.frame(x = runif(2),                                 y = runif(2)))     observeEvent(input$show, {     showModal(modalDialog(rHandsontableOutput("hot")))   })     observeEvent(input$reset, dat(data.frame(x = runif(2),                                             y = runif(2))))     output$hot <- renderRHandsontable(rhandsontable(dat())) } shinyApp(ui,server)

…

-- Sent with Tutanota, the secure & ad-free mailbox. Jul 28, 2021, 03:07 by ***@***.***:

@lgirola <https://github.com/lgirola>> , this should solve your issue: library(shiny)library(rhandsontable)ui <- fluidPage(actionButton("show","Show"), actionButton("reset","Reset"))server <- function(input,output,session){ dat <- reactiveVal(data.frame(x=runif(2),y=runif(2))) dat1 <- reactive({ if(is.null(input$hot)){ dat() } else { as.data.frame(hot_to_r(input$hot)) } }) observeEvent(input$show,{showModal(modalDialog(rHandsontableOutput("hot")))}) observeEvent(input$reset,dat(data.frame(x=runif(2),y=runif(2)))) output$hot <- renderRHandsontable(rhandsontable(dat1())) } #shinyApp(ui,server) — You are receiving this because you were mentioned. Reply to this email directly, > view it on GitHub <#24 (comment)>> , or > unsubscribe <https://github.com/notifications/unsubscribe-auth/AUEZ553XLJGR2BUECQXCGBDTZ5J4ZANCNFSM5ACI6VOA>> .

[timelyportfolio]

please see jrowen/rhandsontable#387 as a step toward a solution

[DillonHammill]

Thanks so much for looking into this @timelyportfolio! Do you mind taking a look at the original issue as well (i.e. the row/column editing). I have done some additional testing and if I click on a column name I cannot edit it in the modal dialog, but if I close the dialog the cell for the column name that I wanted to edit appears (i.e. column headers shown in mainPage() rather than modal). Perhaps this is related to the z-index? Is there a way to increase it just for column and row headers?

I am happy to add you as a contributor to this project if you would be interested.

[DillonHammill]

@timelyportfolio, I have tried increasing the z-index in the dataEdit module to 10000. If I do this the box to edit the column headers does appear, however I am unable to edit the text. Perhaps I need to up the z-index for other components as well?

DataEditR/R/dataEdit.R

Line 418 in 5e10bc8

'z-index:1000;' +

[ShinyFabio]

Hi Dillon, I saw this solution:

please see jrowen/rhandsontable#387 as a step toward a solution

Do I have to implement it in my code, or I have to wait a version of your package with this bugfix? Because, for example, if I use dataEditServer() and dataEditUI() to display the table, I don't have to use the renderRHandsontable() function.

[DillonHammill]

@ShinyFabio, unfortunately this won't fix your original issue related to editing of column/row names in modal dialogs. As I mentioned above this is quite complicated and I have not yet been able to get it to work. You will also notice that the proposed solution does not work in all instances - I hope that a more permanent fix will come in the near future. For now, I think I will leave the code in DataEditR as is - I would recommend using a tabular design in your application if you need to display data on separate pages.

[ShinyFabio]

I tried also to set col_names = FALSE but when I click on a column name (for example to select the entire column) the problem is still there. We will hope for a fix !