Edit-popup disappears and then freeze the column when edit choices have some special characters

[vituri]

Hi!

In the following example, when I double-click in any cell of the column 'Species' the editing-popup that should appear is invisible. I can check that the popup is there because I can click on the options (even though I don't see them). After some clicks, I press Enter and the value is saved on the table. After that, you can't use the same trick to close the popup, because the entire column appears to "freeze".

library(toastui)
library(shiny)

ui <- fluidPage(
  datagridOutput("grid")
)

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

  editgrid <-
    datagrid(iris) %>%
    grid_editor(
      column = "Species",
      type = "checkbox",
      choices = c('Option 1', 'Option.2', 'Option_3', 'Óptión_4', 'Option_5?')
    )

  output$grid <- renderDatagrid({
    editgrid
  })

}

shinyApp(ui, server)

If, however, we change the choices to

choices = c('Option_1', 'Option_2', 'Option_3', 'Óptión_4')

then all works fine. So I guess it is some problem when rendering or converting the character vector to JS.

[pvictor]

Hello,
Thanks for reporting this, indeed choices are used in HTML's ids for checkboxes and spaces are not allowed.
I didn't find a good solution for this, the only way to use special character is to use the listItemText option (https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-editor.md#using-editoroptionslistitems), but for this you need to modify your data.
If you re-install from GitHub you can try the following :

## Re-install from GitHub before running example
# remotes::install_github("dreamRs/toastui")

library(toastui)
library(shiny)

ui <- fluidPage(
  datagridOutput("grid"),
  verbatimTextOutput("edited")
)

server <- function(input, output, session) {
  
  # create a column containing numeric that will be map to editor's choices
  iris$Species2 <- as.character(as.numeric(iris$Species))
  
  editgrid <-
    datagrid(iris) %>%
    grid_editor(
      column = "Species",
      type = "checkbox",
      choices = c("setosa", "versicolor", "virginica")
    ) %>%
    grid_editor(
      column = "Species2",
      type = "checkbox",
      choices = c('Option 1', 'Option.2', 'Option_3', 'Óptión_4', 'Option_5?'),
      useListItemText = TRUE
    )
  
  output$grid <- renderDatagrid({
    editgrid
  })
  output$edited <- renderPrint({
    input$grid_data
  })
}

shinyApp(ui, server)

[vituri]

Thanks, @pvictor! Your solution works very well, I can do the "defusing" of the integers back to characters on the server side without any problems.

The only strange thing I noticed was that when adding the option of editing with a single click instead of double click (like below) the output table is not refreshed automatically as before.

## Re-install from GitHub before running example
# devtools::install_github("dreamRs/toastui")

library(toastui)
library(shiny)

ui <- fluidPage(
  datagridOutput("grid")
  ,verbatimTextOutput("edited")
)

server <- function(input, output, session) {
  
  # create a column containing numeric that will be map to editor's choices
  iris$Species2 <- as.character(as.numeric(iris$Species))
  
  editgrid <-
    datagrid(iris) %>%
    grid_editor(
      column = "Species",
      type = "select",
      choices = c("setosa", "versicolor", "virginica")
    ) %>%
    grid_editor(
      column = "Species2",
      type = "checkbox",
      choices = c('Option 1', 'Option.2', 'Option_3', 'Óptión_4', 'Option_5?'),
      useListItemText = TRUE
    ) %>% 
    grid_editor_opts(editingEvent = 'click')
  
  output$grid <- renderDatagrid({
    editgrid
  })
  output$edited <- renderPrint({
    input$grid_data
  })
}

shinyApp(ui, server)

This is not a big deal for me because I will use the option actionButtonId in grid_editor_opts, but maybe it is worth a look.

Thanks again!