@crowdstrike/glide-core 0.12.1 → 0.12.3

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

@@ -12,6 +12,7 @@ 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';
+import GlideCoreTag from './tag.js';
 let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherComponent extends LitElement {
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
@@ -24,11 +25,7 @@ let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherCompon
       multiple
       open
     >
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></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>`;
@@ -40,24 +37,18 @@ GlideCoreDropdownInAnotherComponent = __decorate([
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 GlideCoreDropdownInAnotherComponent.shadowRootOptions.mode = 'open';
+GlideCoreTag.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
-        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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -72,22 +63,15 @@ it('toggles open and closed when the button is clicked', async () => {
       open
       multiple
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     await elementUpdated(component);
     const options = component.shadowRoot?.querySelector('[data-test="options"]');
@@ -101,15 +85,8 @@ it('does not toggle open and closed when the button overflow text is clicked', a
       open
       multiple
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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
@@ -131,15 +108,8 @@ it('selects options on click', async () => {
       open
       multiple
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.click();
@@ -158,15 +128,8 @@ it('selects options on Space', async () => {
       multiple
       open
     >
-      <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="One"></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);
@@ -190,15 +153,8 @@ it('selects options on Enter', async () => {
       multiple
       open
     >
-      <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="One"></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);
@@ -216,15 +172,8 @@ it('selects options on Enter', async () => {
 });
 it('activates Select All by default', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
@@ -234,15 +183,8 @@ it('activates Select All by default', async () => {
 });
 it('deactivates all other options on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
@@ -279,14 +221,10 @@ it('remains open when an option is selected via Enter', 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.querySelector('glide-core-dropdown-option')?.focus();
     await sendKeys({ press: 'Enter' });
@@ -301,14 +239,10 @@ it('remains open when an option is selected via Space', 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>`);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
@@ -317,15 +251,9 @@ it('remains open when an option is selected via Space', async () => {
 });
 it('activates Select All on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -343,15 +271,13 @@ it('does not activate the next option on ArrowDown when a tag is focused', 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>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     component.shadowRoot
         ?.querySelector('[data-test="tag"]')
@@ -359,7 +285,7 @@ it('does not activate the next option on ArrowDown when a tag is focused', async
     await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.true;
 });
-it('updates its tag when the `label` of a selected option is changed programmatically', async () => {
+it('updates its tag when `label` of a selected option is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
@@ -375,6 +301,22 @@ it('updates its tag when the `label` of a selected option is changed programmati
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     expect(tag?.label).to.equal('Three');
 });
+it('makes its tag editable when `editable` of a selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.editable = true;
+    await elementUpdated(component);
+    const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
+    expect(tag?.privateEditable).to.be.true;
+});
 it('selects and deselects options when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -557,29 +499,41 @@ it('updates `value` when the `value` of a selected option is emptied programmati
     option.value = '';
     expect(component.value).to.deep.equal(['two']);
 });
-it('has no internal label when an option is newly selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
+it('updates `value` a tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown open 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>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="tag"]')
+        ?.click();
+    expect(component.value).to.deep.equal(['two']);
+});
+it('has no internal label when an option is newly selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
     component
         .querySelector('glide-core-dropdown-option:last-of-type')
         ?.click();
     await elementUpdated(component);
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label).to.not.exist;
+    expect(label?.checkVisibility()).to.not.be.ok;
 });
 it('hides tags to prevent overflow', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -588,25 +542,10 @@ it('hides tags to prevent overflow', async () => {
       multiple
       style="display: block; max-width: 20rem;"
     >
-      <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="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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
@@ -627,25 +566,10 @@ it('has overflow text when its tags are overflowing', async () => {
       multiple
       style="display: block; max-width: 20rem;"
     >
-      <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="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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
@@ -666,14 +590,10 @@ it('deselects the option when its tag is removed', 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.shadowRoot
         ?.querySelector('[data-test="tag"]')
@@ -685,13 +605,11 @@ it('deselects all but the last selected option when `multiple` is changed to `fa
     const component = await fixture(html `<glide-core-dropdown open 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>`);
@@ -707,15 +625,8 @@ it('selects all options when none are selected and Select All is selected via cl
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -733,14 +644,10 @@ it('selects all options when some are selected and Select All is selected via cl
     >
       <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.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -758,13 +665,11 @@ it('deselects all options when all are selected and Select All is selected via c
     >
       <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>`);
@@ -783,15 +688,8 @@ it('selects all options when none are selected and Select All is selected via Sp
       open
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -812,14 +710,10 @@ it('selects all options when some are selected and Select All is selected via Sp
     >
       <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?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -840,13 +734,11 @@ it('deselects all options when all are selected and Select All is selected via S
     >
       <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>`);
@@ -867,15 +759,8 @@ it('selects all options when none are selected and Select All is selected via En
       open
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -896,14 +781,10 @@ it('selects all options when some are selected and Select All is selected via En
     >
       <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?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -924,13 +805,11 @@ it('deselects all options when all are selected and Select All is selected via E
     >
       <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>`);
@@ -952,14 +831,10 @@ it('shows Select All', 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>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -975,15 +850,8 @@ it('sets Select All as selected when all options are selected', async () => {
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
@@ -998,15 +866,8 @@ it('sets Select All as deselected when no options are selected', async () => {
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
@@ -1023,15 +884,8 @@ it('sets Select All as indeterminate when not all options are selected', async (
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
@@ -1046,15 +900,8 @@ it('does not set Select All as indeterminate when no options are selected', asyn
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
@@ -1069,15 +916,8 @@ it('does not set Select All as indeterminate when all options are selected', asy
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
@@ -1089,14 +929,10 @@ it('closes when a tag is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown 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-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     assert(tag);
@@ -1111,39 +947,76 @@ it('closes when a tag is clicked', async () => {
     await elementUpdated(component);
     expect(component.open).to.be.false;
 });
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      disabled
-      multiple
-    >
+it('closes on edit via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
       <glide-core-dropdown-option
         label="One"
-        value="one"
+        editable
+        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>`);
-    await sendKeys({ press: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    await elementUpdated(component);
+    expect(component.open).to.be.false;
 });
-it('clicks the button when `click()` is called', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+it('closes on edit via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
       <glide-core-dropdown-option
         label="One"
-        value="one"
+        editable
+        selected
       ></glide-core-dropdown-option>
 
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('closes on edit via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
       <glide-core-dropdown-option
-        label="Two"
-        value="two"
+        label="One"
+        editable
+        selected
       ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      disabled
+      multiple
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement).to.equal(document.body);
+});
+it('clicks the primary 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"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);
     setTimeout(() => {
         component.click();