Fix Dropdown filtering bug (#681)

Author: clintcs

.changeset/pretty-cycles-look.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+- Filterable Dropdown with a custom `filter()` method now calls that method when its input field is empty.

src/dropdown.test.interactions.filterable.ts

@@ -141,6 +141,26 @@ it('unfilters when an option is selected via Enter', async () => {
   expect(options.length).to.equal(11);
 });
 
+it('unfilters on Backspace', async () => {
+  const component = await fixture<GlideCoreDropdown>(
+    html`<glide-core-dropdown label="Label">
+      ${defaultSlot}
+    </glide-core-dropdown>`,
+  );
+
+  component.focus();
+  await sendKeys({ type: 'one' });
+  await sendKeys({ press: 'Backspace' });
+  await sendKeys({ press: 'Backspace' });
+  await sendKeys({ press: 'Backspace' });
+
+  const options = [
+    ...component.querySelectorAll('glide-core-dropdown-option'),
+  ].filter(({ hidden }) => !hidden);
+
+  expect(options.length).to.equal(11);
+});
+
 it('does nothing on Enter when every option is filtered out', async () => {
   const component = await fixture<GlideCoreDropdown>(
     html`<glide-core-dropdown label="Label" placeholder="Placeholder">

src/dropdown.ts

@@ -1284,8 +1284,18 @@ export default class GlideCoreDropdown
       this.isInputOverflow =
         this.#inputElementRef.value.scrollWidth >
         this.#inputElementRef.value.clientWidth;
+
+      // For the case where the selected option is programmatically removed
+      // from the DOM. Without this, the value of the input field would still
+      // be set to the selected option's `label`. And an ellipsis would still
+      // be shown if the `label` was long enough to be truncated.
     } else if (!this.multiple && this.#inputElementRef.value) {
       this.#inputElementRef.value.value = '';
+      this.inputValue = '';
+
+      this.isInputOverflow =
+        this.#inputElementRef.value.scrollWidth >
+        this.#inputElementRef.value.clientWidth;
     }
   }
 
@@ -1836,7 +1846,7 @@ export default class GlideCoreDropdown
 
     let options: GlideCoreDropdownOption[] | undefined;
 
-    if (this.#inputElementRef.value?.value) {
+    if (this.#inputElementRef.value) {
       try {
         // It would be convenient for consumers if we passed an array of options
         // as the second argument. The problem is consumers fetch and render new