javascript - how to add Select All and remove all button on multiInput() shinywidgets

Question

I am creating a dashboard where I have list of nationalities. I want to show these nationality in dual list box with select All and remove All button using multiInput() from shinyWidgets. Here is the example: Shiny Code.

multiInput(label =  "Nationality",inputId = "tp_nat",
choices= tpn_mater$name,"100%",options= list(
enable_search = TRUE,
search_placeholder ="Search...",
non_selected_header = "Available",
selected_header = "Selected "
                                                                                                             ) ),

#Button Code 
div(id="multisecallsec",fluidRow(column(width = 6,align="center",actionBttn(inputId = "tpnatSAll",size = "sm",style = "material-circle",label = NULL,icon = icon("angle-double-right",lib = "font-awesome"))),
                                                                                                                  column(width = 6,align="center",actionBttn(inputId="tpnatRAll",label = NULL,size="sm",style = "material-circle",icon = icon("angle-double-left",lib = "font-awesome")))

JavaScript Function

try{
  function tpselectAll(sltid){
    const multiwrapper = document.querySelector(sltid),
      nonSelectedDiv = multiwrapper.querySelector('.non-selected-wrapper'),
      selectedDiv = multiwrapper.querySelector('.selected-wrapper'),
      nonSelectedHeader = nonSelectedDiv.querySelector('.header'),
      selectedHeader = selectedDiv.querySelector('.header');


// Grabbing all itemd from non-selected div
const items = nonSelectedDiv.querySelectorAll('.item');
    // Defining empty array
    const cloneItem = [];
      items.forEach(item => {
      // for all items adding class of selected
      item.classList.add('selected');
      
      // cloning each item and pushing it to the cloneItem array
      cloneItem.push(item.cloneNode(true));
    });
    
    // Loop through all clone items and appending to selectedDiv
    cloneItem.forEach(cln => selectedDiv.appendChild(cln));

}

function tpremoveAll(sltid){
    const multiwrapper = document.querySelector(sltid),
      nonSelectedDiv = multiwrapper.querySelector('.non-selected-wrapper'),
      selectedDiv = multiwrapper.querySelector('.selected-wrapper'),
      nonSelectedHeader = nonSelectedDiv.querySelector('.header'),
      selectedHeader = selectedDiv.querySelector('.header');

const selectedItems = selectedDiv.querySelectorAll('.item');

    // Loop through selectItems and revoing them from selectedDiv
    selectedItems.forEach(item => item.remove());
    // Loop through items and revoing class of selected
    items.forEach(item => item.classList.remove('selected'));

}
  }

catch(err){
  
}

#Button click event

observeEvent(input$tpnatSAll,ignoreNULL = TRUE,ignoreInit = TRUE,{
    shinyjs::runjs("tpselectAll('#tp_nat + .multi-wrapper');")
    # shinyjs::disable("tpnatSAll")
    })

I I am getting partial solution from this but Unable to resolve below issues

1. If I select any one selected option to remove after from selected option It is removing all except clicked option. (Exact Opposite of what I have expected) and it is happening on both boxes (Selected and Non Selected).
2. If I click select all button multiple time it is duplicating selected multiple times.

Or anyone who knows how to implement duallist box with select or Remove All button in Shiny ?

标签： javascriptrshinyshinydashboardshinywidgets