onRestored and selectizeInput

[KZARCA]

Considering this code:

library(shiny)

ui <- function(request) {
    fluidPage(
    actionButton("add1", "+"),
    bookmarkButton(),
    div(id = "empty")
  )
}

server <- shinyServer(function(input, output, session){
  values <- reactiveValues(nItems = 0)
  setBookmarkExclude("add1")
  onBookmark(function(state) {
    state$values$nItems <- values$nItems
  })
  onRestore(function(state) {
    values$nItems <- state$values$nItems
  })
  onRestored(function(state) {
    for (i in seq_len(values$nItems)){
      insertUI("#empty", 
               ui = selectInput(paste0("select", i), label = paste("Select", i), 
               choices = letters[1:5]), 
               immediate = TRUE)
    }
  })
  
  observeEvent(input$add1, {
    values$nItems <- values$nItems + 1
  })
})

shinyApp(ui, server, enableBookmarking = "url", options = c(port = 3456))

When I visit http://127.0.0.1:3456/?_values_&nItems=4, 2 problems occur with the selectInputs:

• The order is not 1, 2, 3, 4, but 2, 3, 4, 1
• The style is broken, except for select1

However when I add the selectize = FALSE argument, everything runs as expected.

[wch]

I'm not able to reproduce the problem. Can you send the results of devtools::session_info()? Also, it may help if you run options(shiny.trace=TRUE) before your app, then copy the output and paste it here.

[KZARCA]

Session info -----------------------------------------------------------------------------------------------------------------------
 setting  value                       
 version  R version 3.4.0 (2017-04-21)
 system   x86_64, linux-gnu           
 ui       RStudio (1.0.143)           
 language fr_FR                       
 collate  fr_FR.UTF-8                 
 tz       Europe/Paris                
 date     2017-06-28                  

Packages ---------------------------------------------------------------------------------------------------------------------------
 package    * version    date       source                        
 curl         2.5        2017-04-14 CRAN (R 3.4.0)                
 devtools     1.12.0     2016-12-05 CRAN (R 3.4.0)                
 digest       0.6.12     2017-01-27 CRAN (R 3.4.0)                
 git2r        0.18.0     2017-01-01 CRAN (R 3.4.0)                
 htmltools    0.3.6      2017-04-28 cran (@0.3.6)                 
 httpuv       1.3.3      2015-08-04 CRAN (R 3.4.0)                
 httr         1.2.1      2016-07-03 CRAN (R 3.4.0)                
 jsonlite     1.5        2017-06-01 cran (@1.5)                   
 memoise      1.1.0      2017-04-21 CRAN (R 3.4.0)                
 mime         0.5        2016-07-07 CRAN (R 3.4.0)                
 R6           2.2.2      2017-06-17 cran (@2.2.2)                 
 Rcpp         0.12.11    2017-05-22 cran (@0.12.11)               
 rstudioapi   0.6        2016-06-27 CRAN (R 3.4.0)                
 shiny      * 1.0.3.9001 2017-06-28 Github (rstudio/shiny@ea407fb)
 withr        1.0.2      2016-06-20 CRAN (R 3.4.0)                
 xtable       1.8-2      2016-02-05 CRAN (R 3.4.0)  

Listening on http://127.0.0.1:3456
SEND {"busy":"busy"}
SEND {"config":{"workerId":"","sessionId":"f0491cdd619a22788ffb49c1b4b053ba","user":null}}
RECV {"method":"init","data":{"add1:shiny.action":0,"._bookmark_:shiny.action":0,".clientdata_pixelratio":1,".clientdata_url_protocol":"http:",".clientdata_url_hostname":"127.0.0.1",".clientdata_url_port":"3456",".clientdata_url_pathname":"/",".clientdata_url_search":"",".clientdata_url_hash_initial":"",".clientdata_url_hash":"",".clientdata_singletons":"",".clientdata_allowDataUriScheme":true}}
SEND {"busy":"idle"}
SEND {"errors":[],"values":[],"inputMessages":[]}
SEND {"busy":"busy"}
SEND {"config":{"workerId":"","sessionId":"0367eeccac0e4136373f3ea4f049894e","user":null}}
RECV {"method":"init","data":{"add1:shiny.action":0,"._bookmark_:shiny.action":0,".clientdata_pixelratio":1,".clientdata_url_protocol":"http:",".clientdata_url_hostname":"127.0.0.1",".clientdata_url_port":"3456",".clientdata_url_pathname":"/",".clientdata_url_search":"?_values_&nItems=4",".clientdata_url_hash_initial":"",".clientdata_url_hash":"",".clientdata_singletons":"",".clientdata_allowDataUriScheme":true}}
SEND {"busy":"idle"}
SEND {"errors":[],"values":[],"inputMessages":[]}
SEND {"shiny-insert-ui":{"selector":"#empty","multiple":false,"where":"beforeEnd","content":{"html":"<div class=\"form-group shiny-input-container\">\n  <label class=\"control-label\" for=\"select1\">Select 1<\/label>\n  <div>\n    <select id=\"select1\"><option value=\"a\" selected>a<\/option>\n<option value=\"b\">b<\/option>\n<option value=\"c\">c<\/option>\n<option value=\"d\">d<\/option>\n<option value=\"e\">e<\/option><\/select>\n    <script type=\"application/json\" data-for=\"select1\" data-nonempty=\"\">{}<\/script>\n  <\/div>\n<\/div>","deps":[{"name":"selectize","version":"0.11.2","src":{"href":"shared/selectize"},"meta":null,"script":null,"stylesheet":"css/selectize.bootstrap3.css","head":"<!--[if lt IE 9]>\n<script src=\"shared/selectize/js/es5-shim.min.js\"><\/script>\n<![endif]-->\n<script src=\"shared/selectize/js/selectize.min.js\"><\/script>","attachment":null,"package":null,"all_files":true}]}}}
SEND {"shiny-insert-ui":{"selector":"#empty","multiple":false,"where":"beforeEnd","content":{"html":"<div class=\"form-group shiny-input-container\">\n  <label class=\"control-label\" for=\"select2\">Select 2<\/label>\n  <div>\n    <select id=\"select2\"><option value=\"a\" selected>a<\/option>\n<option value=\"b\">b<\/option>\n<option value=\"c\">c<\/option>\n<option value=\"d\">d<\/option>\n<option value=\"e\">e<\/option><\/select>\n    <script type=\"application/json\" data-for=\"select2\" data-nonempty=\"\">{}<\/script>\n  <\/div>\n<\/div>","deps":[{"name":"selectize","version":"0.11.2","src":{"href":"shared/selectize"},"meta":null,"script":null,"stylesheet":"css/selectize.bootstrap3.css","head":"<!--[if lt IE 9]>\n<script src=\"shared/selectize/js/es5-shim.min.js\"><\/script>\n<![endif]-->\n<script src=\"shared/selectize/js/selectize.min.js\"><\/script>","attachment":null,"package":null,"all_files":true}]}}}
SEND {"shiny-insert-ui":{"selector":"#empty","multiple":false,"where":"beforeEnd","content":{"html":"<div class=\"form-group shiny-input-container\">\n  <label class=\"control-label\" for=\"select3\">Select 3<\/label>\n  <div>\n    <select id=\"select3\"><option value=\"a\" selected>a<\/option>\n<option value=\"b\">b<\/option>\n<option value=\"c\">c<\/option>\n<option value=\"d\">d<\/option>\n<option value=\"e\">e<\/option><\/select>\n    <script type=\"application/json\" data-for=\"select3\" data-nonempty=\"\">{}<\/script>\n  <\/div>\n<\/div>","deps":[{"name":"selectize","version":"0.11.2","src":{"href":"shared/selectize"},"meta":null,"script":null,"stylesheet":"css/selectize.bootstrap3.css","head":"<!--[if lt IE 9]>\n<script src=\"shared/selectize/js/es5-shim.min.js\"><\/script>\n<![endif]-->\n<script src=\"shared/selectize/js/selectize.min.js\"><\/script>","attachment":null,"package":null,"all_files":true}]}}}
SEND {"shiny-insert-ui":{"selector":"#empty","multiple":false,"where":"beforeEnd","content":{"html":"<div class=\"form-group shiny-input-container\">\n  <label class=\"control-label\" for=\"select4\">Select 4<\/label>\n  <div>\n    <select id=\"select4\"><option value=\"a\" selected>a<\/option>\n<option value=\"b\">b<\/option>\n<option value=\"c\">c<\/option>\n<option value=\"d\">d<\/option>\n<option value=\"e\">e<\/option><\/select>\n    <script type=\"application/json\" data-for=\"select4\" data-nonempty=\"\">{}<\/script>\n  <\/div>\n<\/div>","deps":[{"name":"selectize","version":"0.11.2","src":{"href":"shared/selectize"},"meta":null,"script":null,"stylesheet":"css/selectize.bootstrap3.css","head":"<!--[if lt IE 9]>\n<script src=\"shared/selectize/js/es5-shim.min.js\"><\/script>\n<![endif]-->\n<script src=\"shared/selectize/js/selectize.min.js\"><\/script>","attachment":null,"package":null,"all_files":true}]}}}
RECV {"method":"update","data":{"select2":"a","select3":"a","select4":"a","select1":"a"}}

[bborgesr]

I can't repro either and the stuff above all looks good. It seems like the problem must be a conflict with selectize. Are you able to get this behavior in another machine (virtual or otherwise)?

[KZARCA]

I'm using Mozilla Firefox version 54. I tried the code on Google Chrome and Chromium, and the problem does not occur with these browsers!

[bborgesr]

It seems like this used to be an issue for selectize + Firefox: selectize/selectize.js#198 It's weird it hasn't been fixed.

[KZARCA]

I also noticed that the last line is different between Chrome and Firefox:

Chrome

RECV {"method":"update","data":{"select1":"a","select2":"a","select3":"a","select4":"a"}}

Firefox

RECV {"method":"update","data":{"select2":"a","select3":"a","select4":"a","select1":"a"}}

[wch]

Here's a simpler reproducible example. Most of the time it looks correct in Firefox, but if I reload the page many times, it occasionally comes out in the wrong order, and some are not properly initialized as selectize inputs.

library(shiny)

ui <- function(request) {
  fluidPage(
    div(id = "empty")
  )
}

server <- shinyServer(function(input, output, session){
  for (i in seq_len(4)){
    insertUI("#empty", 
      ui = selectInput(paste0("select", i), label = paste("Select", i), 
        choices = letters[1:5]), 
      immediate = TRUE)
  }
})

shinyApp(ui, server)

The output looks like this: