[Issue Resolved]: Dropdown issue with multi-select option process in SPFx

Introduction

We implemented a customized Learning Management System (LMS) in SharePoint Online using SharePoint Framework (SPFx) for a Postal and Parcel company based out of Melbourne, Victoria, Australia. As part of the requirements, we implemented a multi-select dropdown in this SPFx webpart that will be used to see Training Information based on this dropdown selection. The requirement was to filter the Training Records based on the multi-selection of this dropdown.

Issue

When the user selects multiple options in the multi-select dropdown control, it does not behave properly. It selects the first option and then when we choose another option, in the back-end it adds the selected option to the array but in the output screen, it deselects the first option and selects the other option. So, in this blog, we will learn how to resolve this multi-select dropdown issue.

Scenario

• As per the requirement, we have two dropdowns that allow multiple option selections for the filter functionality.
• Below is one of the multi-select dropdown control for Training filtration :

 <div className={styles.InsideFilter}>  
  <label className={styles.Lable}>Select Training</label>  
     <Dropdown  
      placeholder=”Select”  
      multiSelect  
      selectKeys={this.state.selectedTraining}  
      onChanged={(e) => this.onTrainingChange(e)}  
      options={this.state.trainingDropdownOption}  
     />  
 </div>  

Below are the “dropdown” class properties:

• The “selectKeys” property contains all the selected options which a user has selected.
• The “options” property contains all the options which a user can select from the dropdown.
• The “onChanged” property contains a method that will execute whenever the user will select/ deselect an option.

Solution

• To resolve the multi-select dropdown selection issue, we added a map function to the array "selectedTraining" in the “selectKeys” property.
• This map function will add every selected element to the "selectedTraining" array in the "selectKeys" property.

 <div className={styles.InsideFilter}>  
 <label className={styles.Lable}>Select Training</label>  
     <Dropdown  
      placeholder=”Select”  
      multiSelect  
      selectKeys={this.state.selectedTraining.map((item) => item)}  
      onChanged={(e) => this.onTrainingChange(e)}  
      options={this.state.trainingDropdownOption}  
     />  
 </div>  

So, now when we select or deselect any option, it will affect the output screen immediately.

Conclusion

This is how we can use the multi-select drop-down control with multi-selection in SPFx web part. Hope this will help you. Good day!

If you have any questions you can reach out our SharePoint Consulting team here.