[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.

How to clear Office UI Fabric multi-select dropdown in SPFx webpart with React Framework?

Scenario:

We implemented a webpart using SharePoint Framework (SPFx) that includes the filter functionality. As per the requirement, we have one dropdown that allows multiple options selection for filter functionality. Now when user clicks on the "Clear Filter" button, it should clear the selection of options from the dropdown.

Below is our dropdown control with multiple items selection:

 <Dropdown  
  multiSelect  
  className="multiSelectDrodpown"  
  options={currentObj.state.dropdownOptions}  
  defaultSelectedKeys={this.state.selectedOptions}  
  onChanged={(val) => currentObj.filterData(val)}           
 ></Dropdown>  

Note:

• dropdownOptions state contains all the options which will be display in multi select dropdown control.
• selectedOptions is the state which contains the options which are currently selected.

Problem Statement:

• When we select the values from the multi-select dropdown control, we pass those values to defaultSelectedKeys parameter of the multi-dropdown control to show the selected values. 
• But when we clear the value of the state which we are using in defaultSelectedKeys parameter(selectedOptions state in our scenario), it does not clear the selection of multi-select dropdown.

Solution:

• To resolve this issue, we need to use the "key" parameter of the office fabric UI dropdown control and set the unique number as the value on click event of the "Clear Filter" button.
• Using a new value for key parameter means, it renders fresh control each time.
• Here, we use randomIndex state to set a new key value to generate a random number. Below is an example to use key attribute:

 <Dropdown  
  multiSelect  
  className="multiSelectDrodpown"  
  options={currentObj.state.dropdownOptions}  
  defaultSelectedKeys={this.state.selectedOptions}  
  onChanged={(val) => currentObj.filterData(val)}     
  key={this.state.randomIndex}        
 ></Dropdown>  

• Now, when user clicks the "Clear Filter" button, it will update randomIndex state and set a new random number as its value.
• Here, we are using Math.floor and Math.random()  function to generate random numbers.

 private async clearFields() {  
      await this.setState({    
          randomIndex: Math.floor(Math.random() * 6) + 1          
       });  
 }  

Conclusion:

This is how we can clear the value of multi-select dropdownlist in SharePoint Framework (SPFx).

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