How to reset calcite-dropdown to a default calcite-dropdown-item

GregoryBologna — Wed, 19 Oct 2022 16:08:58 GMT

I want to reset the calcite-dropdown-item to a specific default item anytime a reset of the container is clicked. My code to reset it doesn't work as well as I had hoped. My workflow is to first unset the current selected calcite-dropdown-item and then set the default calcite-dropdown-item. I had to use dispatchEvent to set properties for other elements, but doing this was somewhat incomplete. My solution, which works, is to just remove the calcite-dropdown and rebuild it.

container

async function resetBufferUnit() { try { // remove calcite-dropdown and recreate document.querySelector('#pao-buffer-unit').remove(); let results = await buildBufferUnitsOption(); let p = document.getElementById('pao-buffer-slider-block'); if (p) p.insertBefore(results, p.firstChild); // doesn't work right // get current active unit and reset to default unit feet /* let el = document.querySelectorAll('#pao-buffer-unit-group1>calcite-dropdown-item[active]'); if (el[0]?.id !== 'pao-unit-feet') { el[0].active = false; el[0].removeAttribute('active'); el[0].removeAttribute('selected'); el[0].setAttribute('aria-checked', 'false'); // set default pao-unit-feet el = document.querySelectorAll('#pao-buffer-unit-group1>calcite-dropdown-item#pao-unit-feet'); if (el) { el[0].active = true; el[0].setAttribute('active', ''); el[0].setAttribute('selected', ''); el[0].setAttribute('aria-checked', 'true'); const e = new Event('calciteDropdownSelect'); el = document.getElementById('pao-buffer-unit'); el.dispatchEvent(e); } } */ } catch (err) { console.log(err); } } // end function buildBufferUnitsOption() { return new Promise((resolve) => { let opt = document.createElement('calcite-dropdown'); opt.setAttribute('id', 'pao-buffer-unit'); opt.setAttribute('overlay-positioning', 'fixed'); opt.setAttribute('placement', 'bottom-start'); opt.setAttribute('type', 'click'); opt.setAttribute('scale', 'm'); opt.style.whiteSpace = 'nowrap'; opt.addEventListener('calciteDropdownSelect', getBufferUnitType); let btn = document.createElement('calcite-button'); btn.setAttribute('slot', 'dropdown-trigger'); btn.setAttribute('id', 'pao-buffer-unit-button'); btn.setAttribute('scale', 'm'); opt.appendChild(btn); let grp = document.createElement('calcite-dropdown-group'); grp.setAttribute('id', 'pao-buffer-unit-group1'); grp.setAttribute('selection-mode', 'single'); // Feet let opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-feet'); opt_item.setAttribute('active', ''); opt_item.setAttribute('data-unit-abrv', 'ft'); opt_item.innerHTML = 'Feet'; grp.appendChild(opt_item); unitType = 'feet'; // init to default feet // Yards opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-yards'); opt_item.setAttribute('data-unit-abrv', 'yds'); opt_item.innerHTML = 'Yards'; grp.appendChild(opt_item); // Kilometers opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-kilometers'); opt_item.setAttribute('data-unit-abrv', 'km'); opt_item.innerHTML = 'Kilometers'; grp.appendChild(opt_item); // Meters opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-meters'); opt_item.setAttribute('data-unit-abrv', 'm'); opt_item.innerHTML = 'Meters'; grp.appendChild(opt_item); // Miles. (enabled based on parcel density determined by specification) opt_item = document.createElement('calcite-dropdown-item'); opt_item.setAttribute('id', 'pao-unit-miles'); opt_item.setAttribute('data-unit-abrv', 'mi'); opt_item.innerHTML = 'Miles'; grp.appendChild(opt_item); opt.appendChild(grp); resolve(opt); }); } // end

Re: How to reset calcite-dropdown to a default calcite-dropdown-item

KittyHurley — Wed, 19 Oct 2022 19:03:55 GMT

Hi @GregoryBologna,

The Select component might be a better fit for the use case based on the sample provided above. The component works well for selections, and in particular with form-based selections.

If that seems in line with the use case, here's a Codepen example using the Select and Option components.

Re: How to reset calcite-dropdown to a default calcite-dropdown-item

GregoryBologna — Wed, 19 Oct 2022 21:04:44 GMT

Ok. Thank you for the suggestion and example, Kitty. I wasn't able to get the Codepen example to reset. But that's Ok because I want to stick with the design I have already built. Removing the component and rebuilding it on a reset is working out for me.

topic Re: How to reset calcite-dropdown to a default calcite-dropdown-item in Calcite Design System Questions

How to reset calcite-dropdown to a default calcite-dropdown-item

Re: How to reset calcite-dropdown to a default calcite-dropdown-item

Re: How to reset calcite-dropdown to a default calcite-dropdown-item