LWC: How to reset values of a multiselect combo box on click of a button in LWC

Question

In my parent component I'm calling child component as:

<c-multiselect-picklist multi-picklist-values={picklistValues} onselect={handleChange}
preselected-string={selectedPicklistValue} data-id="first"></c-multiselect-picklist>

JS:

picklistValues = {}; 
picklistOptions = [   { label: 'First', value: 'First'},
                        { label: 'Second', value: 'Second'},
                        { label: 'Third', value: 'Third'},
                        { label: 'Fourth', value: 'Fourth'}
                    ];

connectedCallback() {

this.picklistValues.label = '';
this.picklistValues.optionsToSelect = this.picklistOptions;

this.selectedPicklistValue = 'Some String';

}

In the UI, I have a button reset and on click of that I would like to reset multiselect child LWC to initial state without any selections. How this can be achieved in LWC.

I tried with making picklistValues as null but still lightning combobox shows selected options.

Answer 1

As already commented it is hard to tell what would work for your custom combobox without seeing your actual implementation, however I can show you a working solution:

Multi Select Combobox

I wrote an article on how to create a LWC multi select combobox that might help you: https://medium.com/@svierk/how-to-create-the-lwc-multi-select-combobox-that-salesforce-is-still-missing-c7bf3a2850dd

The source code including JEST unit tests and JSDoc comments is available here: https://github.com/svierk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox

Reset the current selection

To reset the current selection from outside using for example a button, you just have to add a reset method and make it available to the outside using the @api annotation. If you use my component, this method would looks like this:

@api
reset() {
  this.selectedItems = this.placeholder;
  this.currentOptions = [];
  this.selectedOptions = [];
  this.isLoaded = false;
}

You can then call your reset method from the respective parent component via query selector:

this.template.querySelector('c-multi-select-combobox').reset();