@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/dropdown.test.basics.js

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import './dropdown.option.js';
 import { ArgumentError } from 'ow';
 import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { repeat } from 'lit/directives/repeat.js';
 import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
 import expectArgumentError from './library/expect-argument-error.js';
 import sinon from 'sinon';
 // You'll notice quite a few duplicated tests among the "*.single.ts", "*.multiple.ts",
@@ -18,6 +18,7 @@ import sinon from 'sinon';
 // duplicating them in both `dropdown.test.interactions.single.ts` and
 // `dropdown.test.interactions.multiple.ts` would add a ton of test weight.
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-dropdown')).to.equal(GlideCoreDropdown);
 });
@@ -31,15 +32,10 @@ it('has defaults', async () => {
         value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    expect(component.hasAttribute('disabled')).to.be.false;
-    expect(component.disabled).to.equal(false);
-    expect(component.hasAttribute('filterable')).to.be.false;
-    expect(component.filterable).to.equal(false);
-    expect(component.getAttribute('name')).to.be.null;
-    expect(component.name).to.equal(undefined);
-    expect(component.hasAttribute('required')).to.be.false;
-    expect(component.required).to.equal(false);
-    expect(component.getAttribute('size')).to.equal('large');
+    expect(component.disabled).to.be.false;
+    expect(component.filterable).to.be.false;
+    expect(component.name).to.be.empty.string;
+    expect(component.required).to.be.false;
     expect(component.size).to.equal('large');
     // Not reflected, so no attribute assertion is necessary.
     expect(component.value).to.deep.equal([]);
@@ -169,7 +165,7 @@ it('can be `disabled`', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.equal(true);
+    expect(component.disabled).to.be.true;
 });
 it('can be `required`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
@@ -179,7 +175,7 @@ it('can be `required`', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.equal(true);
+    expect(component.required).to.be.true;
 });
 it('can be `multiple`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
@@ -194,7 +190,7 @@ it('can be `multiple`', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.hasAttribute('multiple')).to.be.true;
-    expect(component.multiple).to.equal(true);
+    expect(component.multiple).to.be.true;
 });
 it('can be `select-all`', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -209,7 +205,7 @@ it('can be `select-all`', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.hasAttribute('select-all')).to.be.true;
-    expect(component.selectAll).to.equal(true);
+    expect(component.selectAll).to.be.true;
 });
 it('activates the first option when no options are initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
@@ -386,3 +382,20 @@ it('does not throw if the default slot only contains whitespace', async () => {
     }
     expect(spy.callCount).to.equal(0);
 });
+it('hides the tooltip of the active option when open', async () => {
+    // The period is arbitrary. 500 of them ensures we exceed the maximum
+    // width even if it's increased.
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label=${'.'.repeat(500)}
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const tooltip = component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.false;
+});

package/dist/dropdown.test.basics.multiple.js

@@ -2,6 +2,7 @@
 import './dropdown.option.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
+import GlideCoreTag from './tag.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
@@ -73,38 +74,7 @@ it('has a tag when an option is initially selected', async () => {
     </glide-core-dropdown>`);
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     expect(tag?.checkVisibility()).to.be.true;
-    expect(tag?.textContent?.trim()).to.equal('One');
-});
-it('only has so many tags when many options are initially selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Three"
-        value="three"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Four"
-        value="four"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const tagContainers = [
-        ...(component.shadowRoot?.querySelectorAll('[data-test="tag-container"]') ?? []),
-    ].filter((element) => element.checkVisibility());
-    expect(tagContainers?.length).to.equal(3);
+    expect(tag?.label).to.equal('One');
 });
 it('shows Select All', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -271,3 +241,66 @@ it('has no internal label when an option is initially selected', async () => {
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     expect(label).to.not.exist;
 });
+it('has a "multiselect" icon for each selected option with a value', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+      <div slot="icon:three">✓</div>
+
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const icons = component.shadowRoot?.querySelectorAll('[data-test="multiselect-icon-slot"]');
+    expect(icons?.length).to.equal(2);
+});
+it('has no "multiselect" icons', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const icons = component.shadowRoot?.querySelectorAll('[data-test="multiselect-icon-slot"]');
+    expect(icons?.length).to.equal(0);
+});
+it('has no "single-select" icon', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
+    expect(iconSlot).to.be.null;
+});

package/dist/dropdown.test.basics.single.js

@@ -77,3 +77,52 @@ it('hides Select All', async () => {
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
+it('has an icon when an option with a value is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option label="One" value="one" selected>
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two" value="two">
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
+    expect(iconSlot instanceof HTMLSlotElement).to.be.true;
+    expect(iconSlot?.assignedElements().at(0)?.slot).to.equal('icon:one');
+});
+it('has no icon when an option without a value is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option label="One" selected>
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two" value="two">
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
+    expect(iconSlot).to.be.null;
+});
+it('has no icon when no option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option label="One" value="one">
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two" value="two">
+        <div slot="icon">✓</div>
+      </glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
+    expect(iconSlot).to.be.null;
+});

package/dist/dropdown.test.events.filterable.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import * as sinon from 'sinon';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -62,6 +62,17 @@ const defaultSlot = html `
     value="eleven"
   ></glide-core-dropdown-option>
 `;
+it('dispatches a "filter" event on "input"', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    sendKeys({ type: 'o' });
+    const event = await oneEvent(component, 'filter');
+    expect(event instanceof CustomEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.detail).to.equal('o');
+});
 it('does not dispatch "input" events on input', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -69,6 +80,6 @@ it('does not dispatch "input" events on input', async () => {
     const spy = sinon.spy();
     component.addEventListener('input', spy);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'one' });
     expect(spy.callCount).to.equal(0);
 });

package/dist/dropdown.test.focus.filterable.js

@@ -158,8 +158,7 @@ it('does not focus the input when `checkValidity` is called', async () => {
     component.checkValidity();
     expect(component.shadowRoot?.activeElement).to.equal(null);
 });
-it('sets the `value` of the `<input>` to the selected option when focus is lost', async () => {
-    document.body.tabIndex = -1;
+it('sets the `value` of its `<input>` to the selected option when focus is lost', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -172,7 +171,17 @@ it('sets the `value` of the `<input>` to the selected option when focus is lost'
     // back to "One" when focus is lost.
     component.focus();
     await sendKeys({ type: 'o' });
-    document.body.focus();
+    component.blur();
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.value).to.equal('One');
 });
+it('selects the filter text on focus', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.blur();
+    component.focus();
+    expect(window.getSelection()?.toString()).to.equal('one');
+});

package/dist/dropdown.test.focus.js

@@ -33,6 +33,22 @@ it('closes and reports validity when it loses focus', async () => {
     await sendKeys({ up: 'Shift' });
     expect(component.open).to.be.false;
     expect(component.shadowRoot?.activeElement).to.equal(null);
-    expect(component.validity.valid).to.equal(false);
-    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
+    expect(component.validity.valid).to.be.false;
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
+});
+it('is focused when clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
+    // which puts us in a guard in the event handler. `Event` has no `detail` property
+    // and would work. `CustomEvent` is used for completeness and to get us as close as
+    // possible to a real click. See the comment in the handler for more information.
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    button?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    expect(component.shadowRoot?.activeElement).to.equal(button);
 });

package/dist/dropdown.test.form.multiple.js

@@ -3,6 +3,7 @@ import './dropdown.option.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
+import GlideCoreTag from './tag.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('can be reset', async () => {
@@ -62,8 +63,8 @@ it('can be reset to the initially selected options', async () => {
     form.reset();
     const tags = component.shadowRoot?.querySelectorAll('[data-test="tag"]');
     expect(tags?.length).to.equal(2);
-    expect(tags?.[0].textContent?.trim()).to.equal('Two');
-    expect(tags?.[1].textContent?.trim()).to.equal('Three');
+    expect(tags?.[0].label).to.equal('Two');
+    expect(tags?.[1].label).to.equal('Three');
     expect(component.value).to.deep.equal(['two', 'three']);
 });
 it('has `formData` value when options are selected', async () => {

package/dist/dropdown.test.interactions.filterable.js

@@ -83,7 +83,7 @@ it('filters', async () => {
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'one' });
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
@@ -96,7 +96,7 @@ it('unfilters when an option is selected via click', async () => {
     // Wait for it to open.
     await aTimeout(0);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'one' });
     [...component.querySelectorAll('glide-core-dropdown-option')]
         .find(({ hidden }) => !hidden)
         ?.click();
@@ -110,37 +110,71 @@ it('unfilters when an option is selected via Enter', async () => {
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'one' });
     await sendKeys({ press: 'Enter' });
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
     expect(options.length).to.equal(11);
 });
-it('shows the magnifying glass icon when there is a filter term', async () => {
+it('does nothing on Enter when every option is filtered out', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'blah' });
+    await sendKeys({ press: 'Enter' });
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    const hiddenOptions = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => hidden);
+    const selectedOptions = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ selected }) => selected);
+    expect(input?.value).to.equal('blah');
+    expect(hiddenOptions.length).to.equal(11);
+    expect(selectedOptions.length).to.equal(0);
+});
+it('shows its magnifying glass icon when single-select and filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
     const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     expect(icon?.checkVisibility()).to.be.true;
 });
-it('hides the magnifying glass icon when there is no filter term', async () => {
+it('hides its magnifying glass icon when single-select and not filtering', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'Backspace' });
+    const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
+    expect(icon?.checkVisibility()).to.be.not.ok;
+});
+it('hides its magnifying glass icon when single-select and the filter is label of the selected option', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const option = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].find(({ hidden }) => !hidden);
+    option?.click();
+    component.focus();
+    await sendKeys({ type: 'One' });
     const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
-it('hides the magnifying glass icon when an option is selected', async () => {
+it('hides its magnifying glass icon when single-select and an option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       ${defaultSlot}
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
     component.focus();
-    await sendKeys({ type: ' one ' });
+    await sendKeys({ type: 'one' });
     const option = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].find(({ hidden }) => !hidden);
@@ -149,7 +183,7 @@ it('hides the magnifying glass icon when an option is selected', async () => {
     await elementUpdated(component);
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
-it('hides the magnifying glass icon when closed programmatically and an option is selected', async () => {
+it('hides its magnifying glass icon when single-select and closed programmatically and an option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -163,6 +197,25 @@ it('hides the magnifying glass icon when closed programmatically and an option i
     const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     component.open = false;
     await elementUpdated(component);
+    expect(icon?.checkVisibility()).to.not.be.ok;
+});
+it('shows its magnifying glass icon when multiselect and filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
+    expect(icon?.checkVisibility()).to.be.true;
+});
+it('hides its magnifying glass icon when multiselect and not filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'Backspace' });
+    const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
 it('does not filter on only whitespace', async () => {
@@ -222,6 +275,26 @@ it('sets the first unfiltered option as active when the previously active option
     expect(option?.privateActive).to.be.true;
     expect(input?.getAttribute('aria-activedescendant')).to.equal(option?.id);
 });
+it('updates the `value` of its `<input>` when the `label` of a selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      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>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.label = 'Three';
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('Three');
+});
 it('updates `value` when an option `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -231,6 +304,26 @@ it('updates `value` when an option `value` is changed programmatically', async (
     option.value = 'two';
     expect(component.value).to.deep.equal(['two']);
 });
+it('sets the `value` of its `<input>` when made filterable', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.filterable = true;
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    // Wait for the `filterable` setter to do its thing.
+    await aTimeout(0);
+    expect(input?.value).to.equal('One');
+});
 it('does not select options on Space', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -282,7 +375,7 @@ it('deselects all options on Meta + Backspace', async () => {
     expect(options[1].selected).to.be.false;
     expect(options[0].selected).to.be.false;
 });
-it('set the `value` of the `<input>` to the label of the selected option when not `multiple`', async () => {
+it('sets the `value` of its `<input>` to the label of the selected option when not `multiple`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -291,7 +384,18 @@ it('set the `value` of the `<input>` to the label of the selected option when no
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.value).to.equal(option?.label);
 });
-it('uses `placeholder` as a placeholder when `multiple` and no option is selected', async () => {
+it('clears the `value` of its `<input>` when multiselect and an option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    const option = component?.querySelector('glide-core-dropdown-option');
+    option?.click();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.be.empty.string;
+});
+it('uses `placeholder` as a placeholder when multiselect and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -538,7 +642,7 @@ it('cannot be tabbed to when `disabled`', async () => {
     await sendKeys({ press: 'Tab' });
     expect(document.activeElement).to.equal(document.body);
 });
-it('sets the `value` of the `<input>` back to the label of selected option when something else is clicked', async () => {
+it('sets the `value` of its `<input>` back to the label of selected option when something other than it is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -564,39 +668,6 @@ it('selects the filter text when `click()` is called', async () => {
     component.click();
     expect(window.getSelection()?.toString()).to.equal('one');
 });
-it('selects the filter text when the `<input>` is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    component.focus();
-    await sendKeys({ type: 'one' });
-    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
-    // which puts us in a guard in the event handler. `Event` has no `detail` property
-    // and would work. `CustomEvent` is used for completeness and to get us as close as
-    // possible to a real click. See the comment in the handler for more information.
-    component.shadowRoot
-        ?.querySelector('[data-test="input"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    expect(window.getSelection()?.toString()).to.equal('one');
-});
-it('selects the filter text when closed and the button is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    component.focus();
-    await sendKeys({ type: 'one' });
-    component.open = false;
-    await elementUpdated(component);
-    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
-    // which puts us in a guard in the event handler. `Event` has no `detail` property
-    // and would work. `CustomEvent` is used for completeness and to get us as close as
-    // possible to a real click. See the comment in the handler for more information.
-    component.shadowRoot
-        ?.querySelector('[data-test="button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    await elementUpdated(component);
-    expect(window.getSelection()?.toString()).to.equal('one');
-});
 it('clicks the `<input>` when `click()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -609,3 +680,28 @@ it('clicks the `<input>` when `click()` is called', async () => {
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
 });
+it('has no icon when filtering and an option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <div slot="icon:one">✓</div>
+      <div slot="icon:two">✓</div>
+
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
+    expect(iconSlot).to.be.null;
+});