Dropdown bugfixes (#678)

Author: clintcs

.changeset/big-dryers-bow.md

@@ -0,0 +1,6 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+- Single-select Dropdown now clears its input field when its selected option is removed.
+- Single-select Dropdown now sets the value of its input field to the label of the selected option on first render.

src/dropdown.test.interactions.filterable.ts

@@ -792,6 +792,33 @@ it('sets the `value` of its `<input>` to the label of the selected option when n
   expect(input?.value).to.equal(option?.label);
 });
 
+it('clears the `value` of its `<input>` when single-select and its selected option is removed', async () => {
+  const component = await fixture<GlideCoreDropdown>(
+    html`<glide-core-dropdown label="Label" filterable>
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`,
+  );
+
+  component.querySelector('glide-core-dropdown-option')?.remove();
+
+  // Wait for `#onDefaultSlotChange()`.
+  await aTimeout(0);
+
+  // Now wait for the forced update in `#onDefaultSlotChange()`.
+  await component.updateComplete;
+
+  const input = component.shadowRoot?.querySelector<HTMLInputElement>(
+    '[data-test="input"]',
+  );
+
+  expect(input?.value).to.be.empty.string;
+});
+
 it('clears the `value` of its `<input>` when multiselect and an option is selected', async () => {
   const component = await fixture<GlideCoreDropdown>(
     html`<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>

src/dropdown.ts

@@ -1276,14 +1276,16 @@ export default class GlideCoreDropdown
     if (
       !this.multiple &&
       this.#inputElementRef.value &&
-      this.lastSelectedOption?.value
+      this.lastSelectedOption
     ) {
       this.#inputElementRef.value.value = this.lastSelectedOption.label;
       this.inputValue = this.lastSelectedOption.label;
 
       this.isInputOverflow =
         this.#inputElementRef.value.scrollWidth >
         this.#inputElementRef.value.clientWidth;
+    } else if (!this.multiple && this.#inputElementRef.value) {
+      this.#inputElementRef.value.value = '';
     }
   }