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

GregoryBologna — Tue, 30 Aug 2022 16:00:11 GMT

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

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

BenElan — Tue, 30 Aug 2022 21:55:55 GMT

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

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

GregoryBologna — Thu, 01 Sep 2022 19:42:15 GMT

Thanks for the example. Works perfect.

topic Re: Select all calcite-pick-list-item(s) without a calciteListChange event in Calcite Design System Questions

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

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

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