@crowdstrike/glide-core 0.9.1 → 0.9.2

package/dist/dropdown.styles.js

@@ -1,14 +1,13 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${menuOpeningAnimation(".options:popover-open")}
+    ${visuallyHidden(".selected-option-labels")}
+  `,css`
     .component {
       --min-inline-size: 9.375rem;
 
       font-family: var(--glide-core-font-sans);
     }
 
-    .selected-option-labels {
-      ${visuallyHidden};
-    }
-
     .dropdown-and-options {
       display: flex;
       position: relative;
@@ -20,7 +19,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       background-color: var(--glide-core-surface-base-lighter);
       block-size: 2.125rem;
-      border: 1px solid var(--glide-core-border-base-lighter);
+      border: 1px solid var(--glide-core-border-base);
       border-radius: var(--glide-core-spacing-xs);
       box-sizing: border-box;
       color: var(--glide-core-text-body-1);
@@ -34,12 +33,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       min-inline-size: var(--min-inline-size);
       padding-inline: var(--glide-core-spacing-sm);
       text-align: start;
+      transition:
+        background-color 200ms ease-in-out,
+        border-color 200ms ease-in-out;
       user-select: none;
       white-space: nowrap;
 
       &.quiet:not(.multiple) {
         background-color: transparent;
-        border: unset;
+        block-size: 1.5rem;
+        border-color: transparent;
+        border-radius: var(--glide-core-border-radius-round);
         font-size: var(--glide-core-heading-xxxs-font-size);
         font-style: var(--glide-core-heading-xxxs-font-style);
         font-weight: var(--glide-core-heading-xxxs-font-weight);
@@ -51,6 +55,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.disabled {
         background: var(--glide-core-surface-disabled);
+        border-color: var(--glide-core-border-base-light);
         color: var(--glide-core-text-tertiary-disabled);
       }
 
@@ -64,16 +69,31 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         padding-inline-start: 0;
       }
 
-      &:has(.button:focus-visible, .input:focus-visible) {
-        ${focusOutline};
+      &.quiet {
+        &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
+            &.error,
+            &.disabled,
+            &.multiple,
+            &.readonly
+          ) {
+          background-color: var(--glide-core-surface-hover);
+          color: var(--glide-core-text-body-1);
+        }
       }
 
-      &:hover:not(&.error, &.disabled, &.readonly) {
-        border-color: var(--glide-core-border-base);
+      &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
+          &.disabled,
+          &.error,
+          &.quiet,
+          &.readonly
+        ) {
+        border-color: var(--glide-core-border-focus);
       }
 
-      &.quiet:hover:not(&.error, &.disabled, &.multiple, &.readonly) {
-        background-color: var(--glide-core-surface-hover);
+      &:has(.button:focus-visible, .input:focus-visible) {
+        &.quiet {
+          border-color: var(--glide-core-border-focus);
+        }
       }
     }
 
@@ -97,6 +117,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       padding: var(--padding);
       position: absolute;
       scroll-behavior: smooth;
+
+      &.hidden {
+        display: none;
+      }
     }
 
     .select-all {
@@ -111,6 +135,16 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .placeholder {
       color: var(--glide-core-text-placeholder);
+
+      &.quiet {
+        &:not(.disabled) {
+          color: var(--glide-core-text-body-1);
+        }
+      }
+
+      &.disabled {
+        color: var(--glide-core-text-tertiary-disabled);
+      }
     }
 
     .tags {
@@ -167,21 +201,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         outline: none;
       }
 
-      &.single.selection:not(:focus) {
-        &::placeholder {
-          color: inherit;
-        }
-      }
-
       &::placeholder {
         font-family: var(--glide-core-font-sans);
       }
     }
-
-    .caret-icon {
-      &.disabled,
-      &.readonly {
-        color: var(--glide-core-surface-selected-disabled);
-      }
-    }
   `];

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

@@ -1,5 +1,6 @@
 import './dropdown.option.js';
 import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
+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';
@@ -91,6 +92,7 @@ it('retains focus on the input when an option is selected via click', async () =
         position: [Math.ceil(x), Math.ceil(y)],
     });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    assert(component.shadowRoot?.activeElement);
     expect(component.shadowRoot?.activeElement).to.equal(input);
 });
 it('retains focus on the the input when an option is selected via Enter', async () => {
@@ -156,3 +158,21 @@ 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;
+    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);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    // Now type something other than "One" so we can check that it's reverted
+    // back to "One" when focus is lost.
+    component.focus();
+    await sendKeys({ type: 'o' });
+    document.body.focus();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('One');
+});

package/dist/dropdown.test.focus.js

@@ -30,6 +30,7 @@ it('closes and reports validity when it loses focus', async () => {
     // Move focus to the button.
     await sendKeys({ down: 'Shift' });
     await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
     expect(component.open).to.be.false;
     expect(component.shadowRoot?.activeElement).to.equal(null);
     expect(component.validity.valid).to.equal(false);

package/dist/dropdown.test.form.js

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
+import sinon from 'sinon';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('exposes standard form control properties and methods', async () => {
     const form = document.createElement('form');
     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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     expect(component.form).to.equal(form);
     expect(component.validity instanceof ValidityState).to.be.true;
@@ -19,123 +18,35 @@ it('exposes standard form control properties and methods', async () => {
     expect(component.checkValidity).to.be.a('function');
     expect(component.reportValidity).to.be.a('function');
 });
-it('can be reset', async () => {
+it('submits its form on Enter when closed', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.shadowRoot?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    form.reset();
-    await elementUpdated(component);
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal('Placeholder');
-    expect(component.value).to.deep.equal([]);
-});
-it('can be reset to the initially selected option', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.shadowRoot?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    form.reset();
-    expect(component.value).to.deep.equal(['two']);
-});
-it('has `formData` value when an option is selected', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-        label="Label"
-        placeholder="Placeholder"
-        name="name"
-      >
-        <glide-core-dropdown-option
-          label="Label"
-          value="value"
-          selected
-        ></glide-core-dropdown-option>
-      </glide-core-dropdown>
-      >`, {
-        parentNode: form,
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.equal('["value"]');
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
 });
-it('has no `formData` value when no option is selected', async () => {
+it('does not submit its form on Enter when open', async () => {
     const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-    >
-      <glide-core-dropdown-option
-        label=""
-        value="value"
-      ></glide-core-dropdown-option>
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` value when disabled and an option is selected', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-      disabled
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` value when an option is selected that has no `value`', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, 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';
@@ -97,15 +97,12 @@ it('unfilters when an option is selected via click', async () => {
     await aTimeout(0);
     component.focus();
     await sendKeys({ type: ' one ' });
-    const option = [
-        ...component.querySelectorAll('glide-core-dropdown-option'),
-    ].find(({ hidden }) => !hidden);
-    option?.click();
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    [...component.querySelectorAll('glide-core-dropdown-option')]
+        .find(({ hidden }) => !hidden)
+        ?.click();
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
-    expect(input?.value).to.equal('');
     expect(options.length).to.equal(11);
 });
 it('unfilters when an option is selected via Enter', async () => {
@@ -115,11 +112,9 @@ it('unfilters when an option is selected via Enter', async () => {
     component.focus();
     await sendKeys({ type: ' one ' });
     await sendKeys({ press: 'Enter' });
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
-    expect(input?.value).to.equal('');
     expect(options.length).to.equal(11);
 });
 it('shows the magnifying glass icon when there is a filter term', async () => {
@@ -154,6 +149,22 @@ 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 () => {
+    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);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    component.focus();
+    await sendKeys({ type: 'two' });
+    const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
+    component.open = false;
+    await elementUpdated(component);
+    expect(icon?.checkVisibility()).to.be.not.ok;
+});
 it('does not filter on only whitespace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -234,31 +245,53 @@ it('does not select options on Space', async () => {
     await sendKeys({ press: ' ' });
     expect(options[0]?.selected).to.be.false;
 });
-it('deselects options on Backspace', async () => {
+it('deselects the last selected option on Backspace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
     options[1].selected = true;
+    await elementUpdated(component);
     component.focus();
+    component.shadowRoot
+        ?.querySelector('[data-test="input"]')
+        ?.setSelectionRange(0, 0);
+    await aTimeout(0);
     await sendKeys({ press: 'Backspace' });
     expect(options[1].selected).to.be.false;
     expect(options[0].selected).to.be.true;
     await sendKeys({ press: 'Backspace' });
     expect(options[0].selected).to.be.false;
 });
-it('uses the label of the selected option as a placeholder when not `multiple`', async () => {
+it('deselects all options on Meta + Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0].selected = true;
+    options[1].selected = true;
+    await elementUpdated(component);
+    component.focus();
+    component.shadowRoot
+        ?.querySelector('[data-test="input"]')
+        ?.setSelectionRange(0, 0);
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'Backspace' });
+    await sendKeys({ up: 'Meta' });
+    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 () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
     const option = component?.querySelector('glide-core-dropdown-option');
     option?.click();
-    await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.placeholder).to.equal(option?.label);
+    expect(input?.value).to.equal(option?.label);
 });
-it('uses `placeholder` as a placeholder when `multiple` and an option is selected', async () => {
+it('uses `placeholder` as a placeholder when `multiple` and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -286,10 +319,10 @@ it('sets `aria-activedescendant` on ArrowDown', async () => {
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
+    component.focus();
     await sendKeys({ press: 'ArrowDown' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
 });
 it('sets `aria-activedescendant` on ArrowUp', async () => {
@@ -502,6 +535,77 @@ it('cannot be tabbed to when `disabled`', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
+    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 () => {
+    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);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    // Now type something other than "One" so we can check that it's reverted
+    // back to "One" when something else is clicked.
+    component.focus();
+    await sendKeys({ type: 'o' });
+    document.body.click();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('One');
+});
+it('selects the filter text when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    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}
+    </glide-core-dropdown>`);
+    const button = component.shadowRoot?.querySelector('[data-test="input"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+});

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
@@ -1056,11 +1056,11 @@ it('remains open when a tag is clicked', async () => {
     await elementUpdated(component);
     expect(component.open).to.be.true;
 });
-it('does not select an option on Enter when the option is not focused', async () => {
-    const component = await fixture(html `<glide-core-dropdown
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
-      open
+      disabled
       multiple
     >
       <glide-core-dropdown-option
@@ -1073,23 +1073,11 @@ it('does not select an option on Enter when the option is not focused', async ()
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option?.focus();
-    await sendKeys({ down: 'Tab' });
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ up: 'Tab' });
-    await sendKeys({ press: 'Enter' });
-    expect(option?.selected).to.be.false;
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement).to.equal(document.body);
 });
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      disabled
-      multiple
-    >
+it('clicks the button when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -1100,6 +1088,11 @@ it('cannot be tabbed to when `disabled`', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
 });