Show selected items in pickerInput at the top of the drop down list

[hlendway]

I'm trying to figure out a way to easily show what items are currently selected in a large drop down (pickerInput) where you can select multiple items. My sample is less extreme (I have lists that are ~1000 items) but if the user makes a selection further in the list, i.e. dog10 and dog 20, the user has to scroll through the list to uncheck old values and select new ones. Does anyone have thoughts on how you can sort the items that are currently selected to the top of the drop down so that it's easy to uncheck those quickly before making a new selection. I do realize the user could use "Deselect All" but it seems they often forget they have items selected when they don't see it right away in the drop down. Maybe there is an option I'm unaware of?

Sample Code:

library(shiny)
library(shinydashboard)
library(tidyverse)
library(shinyWidgets)


ui <- dashboardPage(skin = "black",
                    dashboardHeader(
                      title="Test App"
                    ),
                    dashboardSidebar(
                      sidebarMenu(id = "sidebar"),
                      htmlOutput("pickerInputSelect")
                    ),
                    dashboardBody(
                      
                    )
)


server <- function(input, output, session) {
  
  
  output$pickerInputSelect <- renderUI({
    
    pickerInput(
      inputId = "pickerInputSelect",
      label = "Select Some :",
      choices = c("cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10",
                  "cat11","cat12","cat13","cat14","cat15","cat16","cat17","cat18","cat19","cat20",
                  "dog1","dog2","dog3","dog4","dog5","dog6","dog7","dog8","dog9","dog10",
                  "dog11","dog12","dog13","dog14","dog15","dog16","dog17","dog18","dog19","dog20"),
      options = list(
        `actions-box` = TRUE,
        `live-search` = TRUE,
        `virtual-scroll` = 10,
        `multiple-separator` = "\n",
        size = 10
      ),
      multiple = TRUE
    )
    
  })
  
  
}

shinyApp(ui = ui, server = server)

[nirgrahamuk]

library(shiny)
library(shinydashboard)
library(tidyverse)
library(shinyWidgets)


ui <- dashboardPage(skin = "black",
                    dashboardHeader(
                      title="Test App"
                    ),
                    dashboardSidebar(
                      sidebarMenu(id = "sidebar"),
                      htmlOutput("pickerInputSelect")
                    ),
                    dashboardBody(
                      
                    )
)


server <- function(input, output, session) {
  
  all_choices <- forcats::as_factor(
    c("cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10",
                   "cat11","cat12","cat13","cat14","cat15","cat16","cat17","cat18","cat19","cat20",
                   "dog1","dog2","dog3","dog4","dog5","dog6","dog7","dog8","dog9","dog10",
                   "dog11","dog12","dog13","dog14","dog15","dog16","dog17","dog18","dog19","dog20"))
  
  output$pickerInputSelect <- renderUI({
    
    pickerInput(
      inputId = "pickerInputSelect",
      label = "Select Some :",
      choices = levels(all_choices),
      options = list(
        `actions-box` = TRUE,
        `live-search` = TRUE,
        `virtual-scroll` = 10,
        `multiple-separator` = "\n",
        size = 10
      ),
      multiple = TRUE
    )
    
  })

observeEvent(input$pickerInputSelect,
  {
    got_already <- all_choices[which(all_choices %in% 
                                       input$pickerInputSelect)]

    left_to_get_chr <- setdiff(all_choices,
                               got_already)
    left_to_get <- all_choices[which(all_choices %in% 
                                       left_to_get_chr)]

    new_choices <- forcats::fct_c(got_already,
                                  left_to_get)

    got <- head(new_choices,
      n = length(got_already)
    )


    updatePickerInput(
      session = session,
      inputId = "pickerInputSelect",
      choices = as.character(new_choices),
      selected = as.character(got_already)
    )
  },
  ignoreNULL = FALSE
) 
}

shinyApp(ui = ui, server = server)