2

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.

1
  • It would be helpful if you add html & js code from the child component. Also which component has the reset button?? Commented Nov 21, 2021 at 11:07

1 Answer 1

2

The best practice would be to leverage the potential of SLDS-Library(it's what LWC components are made up of) which already offers similar UI functions. All we need is to utilize its rich class-list and modify its behaviour using JS.

We may proceed as:

  1. When an user selects an option, we consider it selected by appending an slds-is-selected (SLDS) base class to its classList from the JS.
  2. Unchecking an option would simply mean removing the class using removeClass().
  3. When the reset button is clicked, we generate an event and handle it with a handler ClearAll(), which iterates over all the options and repeats step 2.

Uer the querySelector, querySelectorAll, classList.add() and classList.remove(), DOM/functions in native JS for this. I would guess the implementation of the multi-select-picklist component to abide by a general logical structure as you posted being derived from {labe;,value} pairs.

SLDS component reference:https://www.lightningdesignsystem.com/components/picklist/

A similar implementation fo what I intend is here: https://www.sfdcpanther.com/how-to-create-a-multi-select-picklist-using-lwc/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .