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

[GregoryBologna]

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

[KittyHurley]

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.

[GregoryBologna · Accepted 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.