Select all calcite-pick-list-item(s) without a calciteListChange event

[GregoryBologna]

I have a calcite-pick-list with a calciteListChange event listener. This is working fine except when I reset the calcite-pick-list-item(s) to have them all selected. I do not want the change event to fire. I tried adding a removeEventListener before selecting the items and then returning the calciteListChange event listener but this didn't help.

Creating the calcite-pick-list

let taxparcelTypes = document.createElement('calcite-pick-list');
taxparcelTypes.setAttribute('id', 'pao-taxparceltypes-pick-list');
taxparcelTypes.setAttribute('multiple', '');
taxparcelTypes.setAttribute('heading-level', '1');
taxparcelTypes.addEventListener(
   'calciteListChange',
   handleTaxParcelTypesChange
);

Reset calcite-pick-list and select all items

let el = document.getElementById('pao-taxparceltypes-pick-list');
if (el) {
// remove to prevent changed event which causes query to execute
 el.removeEventListener('calciteListChange', handleTaxParcelTypesChange);
 Object.keys(el.children).forEach((key) => {
 if (el.children[key].nodeName.toLowerCase() === 'calcite-pick-list-item') {
   el.children[key].selected = true;
 }
});
// add back changed event
//el.addEventListener('calciteListChange', handleTaxParcelTypesChange);

My calcite-pick-list with two items unselected that will be selected in code fragment above.

The attached Event Listeners

[BenElan · Accepted solution]

Hi @GregoryBologna 

It would probably be easier to add a conditional in the event listener's callback function (handleTaxParcelTypesChange), rather than dynamically adding/removing the listener. Here is an example:

https://codepen.io/benesri/pen/bGvXZgz?editors=0011

[GregoryBologna]

Thanks for the example. Works perfect.