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.
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
Solved! Go to Solution.
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.
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.
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.