shinyStore cannot restore the selected values of the selectizeInput if the choices depend on another input and server = TRUE

Simple Solution

One of simplest solutions can be:

just change your observeEvent(input$Select1, ... observer to this one

    once_flag <- reactiveVal(TRUE)
    observeEvent(input$Select1, {
        updateSelectizeInput(
            session, inputId = "Select2", server = TRUE,
            choices = dat$Letter[dat$Number %in% input$Select1], 
            selected = if(once_flag()) input$store$Select2 else NULL
        )
        once_flag(FALSE)
    }, ignoreInit = TRUE)

And you are done. How simple it is! Everything is solved in the same observeEvent, with only one call of update. The once_flag is to make sure setting Select2 value only one time. Second time and on when you change Select1, we don't set the value of Select2.

Thanks for the correction from other users like @ismirsehregal, so I can come up with the simple solution above. Since shinyStore has provided you this wrapper API directly by input$store, you don't need to write the API as I did below, but the workflow and what's behind are the same. If you are interested in how this solution work, continue to read.

Original answer

cause

The biggest problem we want to solve is server = TRUE, read the help file we know that store choices on the server-side, and load the select options dynamically on searching. That means your client (UI) doesn't know what are the options at the start. HTML5 localstore (what behind shinystore) is a client-side technology, it can only change things that exist at start. If the options are not given when you launch the app, it can't change it. That's why it failed.

detailed solution

If the select2 is updated after/based on select1, can we retrieve the value from shinystore after we settle select1 and then assign the value to select2?

The answer is no and yes. No because the original shinystore didn't provide you any API for R-Javascript communication to retrieve the values. It only allows to set, not get (not true, see comments, but below is helpful to understand how shinystore works). Yes, is because if you understand how html5 localstorage and how Shiny's JS-R communicate, we can write our own API to get the value.

Here is the workflow:

1. app starts, shiny store updates select1
2. server detects select1 updated, update select2's options
3. tell the client to get the value of select2 and send from JS to R. (In shinyStore you can access it by input$store$xxx (input ID). Below, I manually write the code out to show you how they return client-side value into input value.)
4. get the value in R and update select2's selected choice

Let's see how it works in code:

1-2, R

    observeEvent(input$Select1, {
        # detect 1 changed 
        # send signal to client to get stored 2's value
        session$sendCustomMessage(
            "shinyStore_getvalue",
            list(
                namespace = "shinyStore-ex1",
                key = "Select2"
            )
        )
        # updated 2's choices based on 1
        updateSelectizeInput(session, inputId = "Select2",
                             choices = dat$Letter[dat$Number %in% input$Select1],
                             server = TRUE)
        
    }, ignoreInit = TRUE)

How R-JS communicate, read this page.

3, JS

        Shiny.addCustomMessageHandler('shinyStore_getvalue', function(data) {
            var val = localStorage.getItem(`${data.namespace}\\${data.key}`);
            if(val === null) return false;
            val = JSON.parse(val);
            if(val.data === undefined) return false;
            Shiny.setInputValue(`shinystore_${data.key}`, val.data);
        });

get the queried shinystore value and send it to R shiny as an input value that can be directly observe. Not explain details here, again, read that link above if you want to know more.

4, R

    observeEvent(input$shinystore_Select2, {
        updateSelectizeInput(
            session, 
            inputId = "Select2", 
            choices = dat$Letter[dat$Number %in% input$Select1],
            server = TRUE,
            selected = input$shinystore_Select2
        )
    }, once = TRUE)

Add once for only setting the value one time.

Full code for the detailed solution

library(shiny)
library(shinyStore)
ui <- fluidPage(
    headerPanel("shinyStore Example"),
    tags$script(HTML(
        '
        Shiny.addCustomMessageHandler(\'shinyStore_getvalue\', function(data) {
            var val = localStorage.getItem(`${data.namespace}\\\\${data.key}`);
            if(val === null) return false;
            val = JSON.parse(val);
            if(val.data === undefined) return false;
            Shiny.setInputValue(`shinystore_${data.key}`, val.data);
        });
        '
    )),
    sidebarLayout(
        sidebarPanel = sidebarPanel(
            initStore("store", "shinyStore-ex1"),
            selectizeInput(inputId = "Select1", label = "Select A Number",
                           choices = as.character(1:3),
                           options = list(
                               placeholder = 'Please select a number',
                               onInitialize = I('function() { this.setValue(""); }'),
                               create = TRUE
                           ))
        ),
        mainPanel = mainPanel(
            fluidRow(
                selectizeInput(inputId = "Select2", 
                               label = "Select A Letter",
                               choices = character(0),
                               options = list(
                                   placeholder = 'Please select a number in the sidebar first',
                                   onInitialize = I('function() { this.setValue(""); }'),
                                   create = TRUE
                               )),
                actionButton("save", "Save", icon("save")),
                actionButton("clear", "Clear", icon("stop"))
            )
        )
    )
)

server <- function(input, output, session) {
    
    dat <- data.frame(
        Number = as.character(rep(1:3, each = 3)),
        Letter = letters[1:9]
    )
    
    observeEvent(input$Select1, {
        # detect 1 changed 
        # send signal to client to get stored 2's value
        session$sendCustomMessage(
            "shinyStore_getvalue",
            list(
                namespace = "shinyStore-ex1",
                key = "Select2"
            )
        )
        # # updated 2's choices based on 1
        updateSelectizeInput(session, inputId = "Select2",
                             choices = dat$Letter[dat$Number %in% input$Select1],
                             server = TRUE)
        
    }, ignoreInit = TRUE)
    
    observeEvent(input$shinystore_Select2, {
        updateSelectizeInput(
            session, 
            inputId = "Select2", 
            choices = dat$Letter[dat$Number %in% input$Select1],
            server = TRUE,
            selected = input$shinystore_Select2
        )
    }, once = TRUE)
    
    observe({
        if (input$save <= 0){
            updateSelectizeInput(session, inputId = "Select1", selected = isolate(input$store)$Select1)
        }
    })
    
    observe({
        if (input$save <= 0){
            req(input$Select1)
            updateSelectizeInput(session, inputId = "Select2", selected = isolate(input$store)$Select2)
        }
    })
    
    observe({
        if (input$save > 0){
            updateStore(session, name = "Select1", isolate(input$Select1))
            updateStore(session, name = "Select2", isolate(input$Select2))
        }
    })
    
    observe({
        if (input$clear > 0){
            updateSelectizeInput(session, inputId = "Select1",
                                 options = list(
                                     placeholder = 'Please select a number',
                                     onInitialize = I('function() { this.setValue(""); }'),
                                     create = TRUE
                                 ))
            updateSelectizeInput(session, inputId = "Select2",
                                 choices = character(0),
                                 options = list(
                                     placeholder = 'Please select a number in the sidebar first',
                                     onInitialize = I('function() { this.setValue(""); }'),
                                     create = TRUE
                                 ))
            updateStore(session, name = "Select1", NULL)
            updateStore(session, name = "Select2", NULL)
        }
    })
}

shinyApp(ui, server)

We don't have to use custom JavaScript or add further dependencies to solve this problem - input$store is shinyStore's built-in way to retrieve data from the localStorage object and provides us with all needed information on session start (and it is already being used by @www in the example code).

The session object in shiny provides the server (among other things) with client side (or browser) information - e.g. session$clientData$url_search or of interest here: session$input$store.

We have to make sure, that the selection we are trying to set is available in the choices when using updateSelectizeInput - e.g. something like this:

updateSelectizeInput(session, inputId = "myID", selected = 12, choices = 1:10)

won't work.

Furthermore, we need to use freezeReactiveValue to stop triggering other observers downstream after restoring on session start to avoid overwriting the update again.

freezeReactiveValue btw. is almost alway applicable when using update* functions in shiny. Please see this related chapter in Mastering Shiny.

### This script creates an example of the shinystore package

# Load packages
library(shiny)
library(shinyStore)

ui <- fluidPage(
  headerPanel("shinyStore Example"),
  sidebarLayout(
    sidebarPanel = sidebarPanel(
      initStore("store", "shinyStore-ex1"),
      selectizeInput(inputId = "Select1", label = "Select A Number",
                     choices = as.character(1:3),
                     options = list(
                       placeholder = 'Please select a number',
                       onInitialize = I('function() { this.setValue(""); }'),
                       create = TRUE
                     ))
    ),
    mainPanel = mainPanel(
      fluidRow(
        selectizeInput(inputId = "Select2", 
                       label = "Select A Letter",
                       choices = character(0),
                       options = list(
                         placeholder = 'Please select a number in the sidebar first',
                         onInitialize = I('function() { this.setValue(""); }'),
                         create = TRUE
                       )),
        actionButton("save", "Save", icon("save")),
        actionButton("clear", "Clear", icon("stop"))
      )
    )
  )
)

server <- function(input, output, session) {
  
  dat <- data.frame(
    Number = as.character(rep(1:3, each = 3)),
    Letter = letters[1:9]
  )
  
  storeInit <- observeEvent(input$store, {
    freezeReactiveValue(input, "Select1") # required
    freezeReactiveValue(input, "Select2") # not required but should be used before calling any update function which isn't intended to trigger further reactives
    updateSelectizeInput(session, inputId = "Select1", selected = input$store$Select1)
    updateSelectizeInput(session, inputId = "Select2", selected = input$store$Select2, choices = dat$Letter[dat$Number %in% input$store$Select1], server = TRUE)
    storeInit$destroy() # destroying observer, as it is only needed once per session
  }, once = TRUE, ignoreInit = FALSE)
  
  observeEvent(input$Select1, {
    freezeReactiveValue(input, "Select2") # not required but good practice
    updateSelectizeInput(session, inputId = "Select2", 
                         choices = dat$Letter[dat$Number %in% input$Select1],
                         server = TRUE)
  }, ignoreInit = TRUE)
  
  observe({
    if (input$save > 0){
      updateStore(session, name = "Select1", isolate(input$Select1))
      updateStore(session, name = "Select2", isolate(input$Select2))
    }
  })
  
  observe({
    if (input$clear > 0){
      freezeReactiveValue(input, "Select1") # not required but good practice
      freezeReactiveValue(input, "Select2") # not required but good practice
      updateSelectizeInput(session, inputId = "Select1",
                           options = list(
                             placeholder = 'Please select a number',
                             onInitialize = I('function() { this.setValue(""); }'),
                             create = TRUE
                           ))
      updateSelectizeInput(session, inputId = "Select2",
                           choices = character(0),
                           options = list(
                             placeholder = 'Please select a number in the sidebar first',
                             onInitialize = I('function() { this.setValue(""); }'),
                             create = TRUE
                           ))
      
      updateStore(session, name = "Select1", NULL)
      updateStore(session, name = "Select2", NULL)
    }
  })
}

shinyApp(ui, server)

Edit: comparison of the answers given

Now that @lz100 is also using input$store instead of Shiny.addCustomMessageHandler both answers are approximating each other. It boils down to the use of a reactiveVal in @lz100's updated answer (once_flag) and the use of freezeReactiveValue in my answer.

I'd like to point out why I think using freezeReactiveValue is the cleaner approach:

The once_flag-approach fires after input$Select1 is updated (observeEvent parameter ignoreInit = TRUE) and is indirectly depending on input$store. All other observers depending on input$Select1 are unnecessarily triggered twice (first on init, second on update).

Here is the according reactlog (0.0321s to first idle):

Another flaw of the once_flag-approach (as it currently stands) is that the observeEvent will fire everytime input$Select1 is changed, even though no restoring is ongoing (returning NULL but wasting resources).

The freezeReactiveValue-approach is directly listening to changes of input$store when first invoking the app (once = TRUE, ignoreInit = FALSE) preventing downstream triggers, which is slightly faster (0.0212s to first idle):

With a growing app these effects may become more relevant regarding the initialization time - accordingly I second the recommendation I linked above to pair update* functions with freezeReactiveValue.

Javascript solution

The original answer is long enough, I don't want to add more stuff to there. As mentioned in the comments, the previous two answers are using input$store. Here, I provide you with a pure Javascript solution. Yes, no server code is edition is needed. Here is the code, read inline comments to understand how it works.

// get shinyStore value
function getStore(namespace, key) {
    var val = localStorage.getItem(`${namespace}\\${key}`);
    if(val === null) return false;
    val = JSON.parse(val);
    if(val.data === undefined) return false;
    return val.data;
}

$(function(){
    var s1 = $('#Select1');
    var s2 = $('#Select2');
    var s1Stored = getStore('shinyStore-ex1', 'Select1');
    var s2Stored = getStore('shinyStore-ex1', 'Select2');
    // If select1 is set we continue, otherwise stop
    if(s1Stored !== false) {
        // Listen to shiny select1 init event
        // Here we use `one` listener to make sure it only runs one time
        s1.one('shiny:bound', function(){
            var s1Binding = s1.data('shiny-input-binding');
            // set select1 value to our stored value
            s1Binding.setValue(this, s1Stored);
        });
    }
    // if select2 is stored we, continue to set select2
    if(s2Stored !== false) {
        // Here we use 2 `one` nested change listener, select2 is a little trickier. 
        // the first time value change is due Shiny init. The second time is we changed select1 and serverside
        // sends new choices to client, caused the default to set. 
        // We can change to the stored value afterwards,
        // so we set the value exactly after the second time.
        s2.one('change', function(){
            s2.one('change', function(){
                var s2Binding = s2.data('shiny-input-binding');
                s2Binding.setValue(s2.get(0), s2Stored);
            });
        });
    }
});

Instead of adding code to the server, we remove 2 redundant observers. Here is the full code.

### This script creates an example of the shinystore package

# Load packages
library(shiny)
library(shinyStore)
myscript <- tags$script(HTML("
function getStore(namespace, key) {
    var val = localStorage.getItem(`${namespace}\\\\${key}`);
    if(val === null) return false;
    val = JSON.parse(val);
    if(val.data === undefined) return false;
    return val.data;
}

$(function(){
    var s1 = $('#Select1');
    var s2 = $('#Select2');
    var s1Stored = getStore('shinyStore-ex1', 'Select1');
    var s2Stored = getStore('shinyStore-ex1', 'Select2');
    if(s1Stored !== false) {
        s1.one('shiny:bound', function(){
            var s1Binding = s1.data('shiny-input-binding');
            s1Binding.setValue(this, s1Stored);
        });
    }
    if(s2Stored !== false) {
        s2.one('change', function(){
            s2.one('change', function(){
                var s2Binding = s2.data('shiny-input-binding');
                s2Binding.setValue(s2.get(0), s2Stored);
            });
        });
    }
});

"))

ui <- fluidPage(
    headerPanel("shinyStore Example"),
    sidebarLayout(
        sidebarPanel = sidebarPanel(
            initStore("store", "shinyStore-ex1"),
            selectizeInput(inputId = "Select1", label = "Select A Number",
                           choices = as.character(1:3),
                           options = list(
                               placeholder = 'Please select a number',
                               onInitialize = I('function() { this.setValue(""); }'),
                               create = TRUE
                           ))
        ),
        mainPanel = mainPanel(
            fluidRow(
                selectizeInput(inputId = "Select2", 
                               label = "Select A Letter",
                               choices = character(0),
                               options = list(
                                   placeholder = 'Please select a number in the sidebar first',
                                   onInitialize = I('function() { this.setValue(""); }'),
                                   create = TRUE
                               )),
                actionButton("save", "Save", icon("save")),
                actionButton("clear", "Clear", icon("stop"))
            )
        )
    ),
    myscript
)

server <- function(input, output, session) {
    
    dat <- data.frame(
        Number = as.character(rep(1:3, each = 3)),
        Letter = letters[1:9]
    )
    
    observeEvent(input$Select1, {
        updateSelectizeInput(session, inputId = "Select2", 
                             choices = dat$Letter[dat$Number %in% isolate(input$Select1)],
                             # Add server = TRUE make the local storage not working
                             server = T)
    }, ignoreInit = TRUE)
    
    observe({
        if (input$save > 0){
            updateStore(session, name = "Select1", isolate(input$Select1))
            updateStore(session, name = "Select2", isolate(input$Select2))
        }
    })
    
    observe({
        if (input$clear > 0){
            updateSelectizeInput(session, inputId = "Select1",
                                 options = list(
                                     placeholder = 'Please select a number',
                                     onInitialize = I('function() { this.setValue(""); }'),
                                     create = TRUE
                                 ))
            updateSelectizeInput(session, inputId = "Select2",
                                 choices = character(0),
                                 options = list(
                                     placeholder = 'Please select a number in the sidebar first',
                                     onInitialize = I('function() { this.setValue(""); }'),
                                     create = TRUE
                                 ))
            
            updateStore(session, name = "Select1", NULL)
            updateStore(session, name = "Select2", NULL)
        }
    })
}

shinyApp(ui, server)

In terms of performance, there is no noticeable difference with the previous 2, but like mentioned, may be useful later with some heavy app. The good thing is this code runs on the client side. How fast it runs mainly depends on your users' computers, which reduces your server burden, just a little, but a little for each user can sum up to be a big number. Imagine thousands of people are using the app simultaneously. The bad thing is you need to learn JS, not very friendly for beginners.

So, it all depends on your real-world needs. If you want some quick and short solution, use my first post; If you care about performance but don't want to use JS, use @ismirsehregal post; If you have a heavy app and want to have a lot of users, this JS solution maybe better.