@crowdstrike/glide-core 0.12.2 → 0.13.0

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

@@ -6,60 +6,17 @@ import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 const defaultSlot = html `
-  <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="Three"
-    value="three"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Four"
-    value="four"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Five"
-    value="five"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Six"
-    value="six"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Seven"
-    value="seven"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eight"
-    value="eight"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Nine"
-    value="nine"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Ten"
-    value="ten"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eleven"
-    value="eleven"
-  ></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="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-option label="Four"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
 `;
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -218,6 +175,56 @@ it('hides its magnifying glass icon when multiselect and not filtering', async (
     const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
+it('does not clear its filter when a tag is removed via Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></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 input = component.shadowRoot?.querySelector('[data-test="input"]');
+    input?.select();
+    input?.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Backspace' });
+    expect(input?.value).to.equal('o');
+});
+it('does not clear its filter when every tag is removed via Meta + Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></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 input = component.shadowRoot?.querySelector('[data-test="input"]');
+    input?.select();
+    input?.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'Backspace' });
+    await sendKeys({ up: 'Meta' });
+    expect(input?.value).to.equal('o');
+});
 it('does not filter on only whitespace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -257,6 +264,34 @@ it('hides Select All when filtering', async () => {
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
+it('unhides every option after filtering when one is selected and Dropdown is reopened', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      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>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ type: 'two' });
+    component.blur();
+    await elementUpdated(component);
+    component.open = true;
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});
 it('sets the first unfiltered option as active when the previously active option is filtered out', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -308,14 +343,10 @@ 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-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.filterable = true;
     await elementUpdated(component);
@@ -350,7 +381,6 @@ it('deselects the last selected option on Backspace', async () => {
     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;
@@ -395,6 +425,22 @@ it('clears the `value` of its `<input>` when multiselect and an option is select
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.value).to.be.empty.string;
 });
+it('does not clear its filter when a tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.shadowRoot
+        ?.querySelector('[data-test="tag"]')
+        ?.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('one');
+});
 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}
@@ -601,7 +647,7 @@ it('sets `aria-activedescendant` when closed via click', async () => {
         ?.click();
     await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed because it lost focus', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -610,7 +656,7 @@ it('sets `aria-activedescendant` when closed because it lost focus', async () =>
     component.focus();
     await sendKeys({ press: 'Tab' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed because something outside of it was clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -619,7 +665,7 @@ it('sets `aria-activedescendant` when closed because something outside of it was
     document.body.click();
     await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed via Escape', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -628,7 +674,7 @@ it('sets `aria-activedescendant` when closed via Escape', async () => {
     component.focus();
     await sendKeys({ press: 'Escape' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('cannot be tabbed to when `disabled`', async () => {
     await fixture(html `<glide-core-dropdown
@@ -691,17 +737,69 @@ it('has no icon when filtering and an option is selected', async () => {
 
       <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-option label="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;
 });
+it('supports custom filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.filter = async (filter) => {
+        const options = [
+            ...component.querySelectorAll('glide-core-dropdown-option'),
+        ];
+        return options.filter(({ label }) => label.includes(filter));
+    };
+    component.focus();
+    await sendKeys({ type: 'O' });
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(1);
+    expect(options[0].label).to.equal('One');
+});
+it('does nothing when filtering fails', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.filter = () => {
+        return Promise.reject();
+    };
+    component.focus();
+    await sendKeys({ type: 'O' });
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});
+it('updates its item count after filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    const itemCount = component.shadowRoot?.querySelector('[data-test="item-count"]');
+    expect(itemCount?.ariaLabel).to.equal('1 items');
+});