CODEWITHSUNDEEP
rshiny
www
www

Reputation: 39154

Why selectizeInput does not select the first choices when server = FALSE?

The documentation of selectizeInput describes the argument selected as follows.

selected The initially selected value (or multiple values if multiple = TRUE). If not specified then defaults to the first value for single-select lists and no values for multiple select lists.

I interpreted this sentence as the selected argument would be the first element of the choices argument if nothing is specified for the selected. However, in the following example, after the selection of any numbers for the first selectizeInput, the second selectizeInput does not select the first choice. It still displays the default message as a placeholder.

Notice that if I set server = TRUE, the second selectizeInput would be able to display the first choice as the selected.

I am wondering why server = TRUE or server = FALSE affects if the selected can be the first element in choices. I also want to know how I can make the behavior of server = FALSE as the same as when server = TRUE.

library(shiny)

ui <- fluidPage(
  headerPanel("shinyStore Example"),
  sidebarLayout(
    sidebarPanel = sidebarPanel(
      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
                       ))
      )
    )
  )
)

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% input$Select1],
                         server = FALSE)
  })
}

shinyApp(ui, server)

Upvotes: 0

Views: 312

Answers (1)

Ronak Shah
Ronak Shah

Reputation: 389165

Why not create the second selectizeInput completely on the server side?

library(shiny)

ui <- fluidPage(
  headerPanel("shinyStore Example"),
  sidebarLayout(
    sidebarPanel = sidebarPanel(
      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(
        uiOutput('select2')
      )
    )
  )
)

server <- function(input, output, session) {
  
  dat <- data.frame(
    Number = as.character(rep(1:3, each = 3)),
    Letter = letters[1:9]
  )
  
  output$select2 <- renderUI({
      req(input$Select1)
      selectizeInput(inputId = "Select2", 
                     label = "Select A Letter",
                     choices = dat$Letter[dat$Number %in% input$Select1])

  })
}

shinyApp(ui, server)

Upvotes: 1

Related Questions