@crowdstrike/glide-core 0.8.0 → 0.9.1

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, 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';
@@ -72,7 +72,11 @@ it('opens on click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="input"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('filters', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -85,10 +89,12 @@ it('filters', async () => {
     ].filter(({ hidden }) => !hidden);
     expect(options.length).to.equal(1);
 });
-it('clears the filter term when an option is selected', async () => {
+it('unfilters when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     component.focus();
     await sendKeys({ type: ' one ' });
     const option = [
@@ -102,6 +108,20 @@ it('clears the filter term when an option is selected', async () => {
     expect(input?.value).to.equal('');
     expect(options.length).to.equal(11);
 });
+it('unfilters when an option is selected via Enter', 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({ 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 () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -119,9 +139,11 @@ it('hides the magnifying glass icon when there is no filter term', async () => {
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
 it('hides the magnifying glass icon when an option is selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+    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 ' });
     const option = [
@@ -147,10 +169,14 @@ it('hides the options when all of them are filtered out', 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: 'twelve' });
+    await sendKeys({ type: 'fifty' });
+    // Wait for it to close.
+    await aTimeout(0);
     const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    expect(options?.dataset.testVisible).to.equal('false');
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('hides Select All when filtering', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -194,6 +220,20 @@ it('updates `value` when an option `value` is changed programmatically', async (
     option.value = 'two';
     expect(component.value).to.deep.equal(['two']);
 });
+it('does not select options on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+    >
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0]?.focus();
+    await sendKeys({ press: ' ' });
+    expect(options[0]?.selected).to.be.false;
+});
 it('deselects options on Backspace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
@@ -244,6 +284,8 @@ it('sets `aria-activedescendant` on ArrowDown', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -259,6 +301,8 @@ it('sets `aria-activedescendant` on ArrowUp', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1]?.focus();
@@ -275,6 +319,8 @@ it('sets `aria-activedescendant` on Home', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1].focus();
@@ -291,6 +337,8 @@ it('sets `aria-activedescendant` on PageUp', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1].focus();
@@ -298,7 +346,7 @@ it('sets `aria-activedescendant` on PageUp', async () => {
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
 });
-it('sets `aria-activedescendant` on ArrowUp + Meta', async () => {
+it('sets `aria-activedescendant` on Meta + ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -307,9 +355,11 @@ it('sets `aria-activedescendant` on ArrowUp + Meta', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1].focus();
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
     await sendKeys({ up: 'Meta' });
@@ -327,7 +377,8 @@ it('sets `aria-activedescendant` on open via click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    await elementUpdated(component);
+    // Wait for it to open.
+    await aTimeout(0);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     const option = component.querySelector('glide-core-dropdown-option');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(option?.id);
@@ -351,11 +402,13 @@ it('sets `aria-activedescendant` on End', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
     // Made into an array because the linter forces `at(-1)` instead of
     // `[options.length - 1]` but doesn't take into account that `options`
     // isn't an actual array and doesn't have an `at()` method.
     const options = [...component.querySelectorAll('glide-core-dropdown-option')];
-    options[0]?.focus();
     await sendKeys({ press: 'End' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(options.at(-1)?.id);
@@ -369,11 +422,13 @@ it('sets `aria-activedescendant` on PageDown', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
     // Made into an array because the linter forces `at(-1)` instead of
     // `[options.length - 1]` but doesn't take into account that `options`
     // isn't an actual array and doesn't have an `at()` method.
     const options = [...component.querySelectorAll('glide-core-dropdown-option')];
-    options[0]?.focus();
     await sendKeys({ press: 'PageDown' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(options.at(-1)?.id);
@@ -387,11 +442,13 @@ it('sets `aria-activedescendant` on Meta + ArrowDown', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
     // Spread into an array because the linter forces `at(-1)` instead of
     // `[options.length - 1]` but doesn't take into account that `options`
     // isn't an actual array and doesn't have an `at()` method.
     const options = [...component.querySelectorAll('glide-core-dropdown-option')];
-    options[0]?.focus();
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ up: 'Meta' });

package/dist/dropdown.test.interactions.js

@@ -1,10 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { assert, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('opens when opened programmatically', 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>`);
+    component.open = true;
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.true;
+});
 it('opens on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -14,9 +26,9 @@ it('opens on ArrowUp', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
-    const option = component.querySelector('glide-core-dropdown-option');
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
-    expect(option?.privateActive).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on ArrowUp when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -27,7 +39,9 @@ it('does not open on ArrowUp when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on ArrowUp when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -38,7 +52,9 @@ it('does not open on ArrowUp when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('opens on ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -54,9 +70,9 @@ it('opens on ArrowDown', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
-    const option = component.querySelector('glide-core-dropdown-option');
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
-    expect(option?.privateActive).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on ArrowDown when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -72,7 +88,9 @@ it('does not open on ArrowDown when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on ArrowDown when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -88,7 +106,9 @@ it('does not open on ArrowDown when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('opens on Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -99,7 +119,9 @@ it('opens on Space', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on Space when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -110,7 +132,9 @@ it('does not open on Space when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on Space when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -121,7 +145,9 @@ it('does not open on Space when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 // See the `document` click listener comment in `dropdown.ts` for an explanation.
 it('opens when opened programmatically via the click handler of another element', async () => {
@@ -136,7 +162,11 @@ it('opens when opened programmatically via the click handler of another element'
     button.addEventListener('click', () => (component.open = true));
     div.append(button);
     button.click();
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('closes when something outside of it is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -181,6 +211,49 @@ it('closes on Escape', async () => {
     await sendKeys({ press: 'Escape' });
     expect(component.open).to.be.false;
 });
+it('opens when open and enabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      disabled
+    >
+      <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.disabled = false;
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.true;
+});
+it('closes when open and disabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <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>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.disabled = true;
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.false;
+});
 it('activates an option on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
       <glide-core-dropdown-option
@@ -209,6 +282,8 @@ it('activates the next option on ArrowDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -227,6 +302,8 @@ it('activates the previous option on ArrowUp', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1]?.focus();
@@ -247,6 +324,8 @@ it('activates the first option on Home', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     expect(options[1].privateActive).to.be.true;
@@ -267,6 +346,8 @@ it('activates the first option on PageUp', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1].focus();
@@ -287,6 +368,8 @@ it('activates the first option on ArrowUp + Meta', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     expect(options[1]?.privateActive).to.be.true;
@@ -309,6 +392,8 @@ it('activates the last option on End', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'End' });
@@ -327,6 +412,8 @@ it('activates the last option on PageDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'PageDown' });
@@ -345,6 +432,8 @@ it('activates the last option on Meta + ArrowDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ down: 'Meta' });