@crowdstrike/glide-core 0.9.5 → 0.10.0

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

@@ -75,37 +75,6 @@ it('has a tag when an option is initially selected', async () => {
     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);
-});
 it('shows Select All', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -271,3 +240,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.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.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 the magnifying glass icon when an option is selected', async () => {
+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 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 () => {
@@ -231,6 +284,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 +355,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 +364,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 +622,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 +648,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 +660,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;
+});

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

@@ -1,11 +1,45 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
 import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { customElement } from 'lit/decorators.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
+let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherComponent extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+    render() {
+        return html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+    </glide-core-dropdown>`;
+    }
+};
+GlideCoreDropdownInAnotherComponent = __decorate([
+    customElement('glide-core-dropdown-in-another-component')
+], GlideCoreDropdownInAnotherComponent);
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+GlideCoreDropdownInAnotherComponent.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -221,25 +255,20 @@ it('deactivates all other options on "mouseover"', async () => {
     expect(options[2]?.privateActive).to.be.false;
 });
 it('remains open when an option is selected via click', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
-      <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.querySelector('glide-core-dropdown-option')?.click();
-    expect(component.open).to.be.true;
+    const component = await fixture(html `<glide-core-dropdown-in-another-component></glide-core-dropdown-in-another-component>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const option = component.shadowRoot?.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const { x, y } = option.getBoundingClientRect();
+    // Calling `click()` won't do because Dropdown relies on a "mouseup" event to
+    // decide if it should close.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const dropdown = component.shadowRoot?.querySelector('glide-core-dropdown');
+    expect(dropdown?.open).to.be.true;
 });
 it('remains open when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -454,7 +483,7 @@ it('updates `value` when an option is selected or deselected via Space', async (
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal(['one']);
 });
-it('updates `value` when `multiple` is changed to `true` programmatically', async () => {
+it('updates `value` when multiselect is changed to `true` programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
       <glide-core-dropdown-option
         label="One"
@@ -493,9 +522,9 @@ it('updates `value` when the `value` of a selected option is changed programmati
     const option = component.querySelector('glide-core-dropdown-option');
     assert(option);
     option.value = 'three';
-    expect(component.value).to.deep.equal(['two', 'three']);
+    expect(component.value).to.deep.equal(['three', 'two']);
 });
-it('updates `value` when the `value` of a selected option is removed programmatically', async () => {
+it('updates `value` when the `value` of a selected option is emptied programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple>
       <glide-core-dropdown-option
         label="One"
@@ -538,8 +567,13 @@ it('has no internal label when an option is newly selected', async () => {
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     expect(label).to.not.exist;
 });
-it('only has so many tags when many options are selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+it('hides tags to prevent overflow', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      style="display: block; max-width: 20rem;"
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -565,14 +599,20 @@ it('only has so many tags when many options are selected', async () => {
     options[1].selected = true;
     options[2].selected = true;
     options[3].selected = true;
-    await elementUpdated(component);
+    // Wait for the Resize Observer to do its thing.
+    await aTimeout(0);
     const tagContainers = [
         ...(component.shadowRoot?.querySelectorAll('[data-test="tag-container"]') ?? []),
     ].filter((element) => element.checkVisibility());
-    expect(tagContainers?.length).to.equal(3);
+    expect(tagContainers?.length).to.equal(2);
 });
-it('has overflow text when many options are selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+it('has overflow text when its tags are overflowing', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      style="display: block; max-width: 20rem;"
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -598,9 +638,10 @@ it('has overflow text when many options are selected', async () => {
     options[1].selected = true;
     options[2].selected = true;
     options[3].selected = true;
-    await elementUpdated(component);
+    // Wait for the Resize Observer to do its thing.
+    await aTimeout(0);
     const tagOverflow = component.shadowRoot?.querySelector('[data-test="tag-overflow-count"]');
-    expect(tagOverflow?.textContent?.trim()).to.equal('1');
+    expect(tagOverflow?.textContent?.trim()).to.equal('2');
 });
 it('deselects the option when its tag is removed', async () => {
     const component = await fixture(html `<glide-core-dropdown