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.
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();