@crowdstrike/glide-core 0.12.2 → 0.13.0

package/dist/dropdown.test.interactions.js

@@ -1,16 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, 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';
+import sinon from 'sinon';
 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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.open = true;
     await aTimeout(0);
@@ -19,10 +17,7 @@ it('opens when opened programmatically', async () => {
 });
 it('opens on ArrowUp', 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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
@@ -32,10 +27,7 @@ it('opens on ArrowUp', async () => {
 });
 it('does not open on ArrowUp when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <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>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
@@ -45,10 +37,7 @@ it('does not open on ArrowUp when `disabled`', async () => {
 });
 it('does not open on ArrowUp when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
-      <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>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
@@ -58,15 +47,8 @@ it('does not open on ArrowUp when `readonly`', async () => {
 });
 it('opens on ArrowDown', async () => {
     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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -76,15 +58,8 @@ it('opens on ArrowDown', async () => {
 });
 it('does not open on ArrowDown when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <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.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -94,15 +69,8 @@ it('does not open on ArrowDown when `disabled`', async () => {
 });
 it('does not open on ArrowDown when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
-      <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.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -110,6 +78,30 @@ it('does not open on ArrowDown when `readonly`', async () => {
     expect(component.open).to.be.false;
     expect(options?.checkVisibility()).to.be.false;
 });
+it('does not scroll the page on ArrowDown when the Add button has focus', async () => {
+    document.body.style.height = '200vh';
+    document.body.style.scrollBehavior = 'auto';
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Add button
+    const spy = sinon.spy();
+    document.addEventListener('scroll', spy);
+    await sendKeys({ press: 'ArrowDown' }); // Still Add button
+    // The browser apparently inserts a slight delay after arrowing before scrolling,
+    // even when smooth scrolling is disabled. `100` is a round number that comfortably
+    // gets us past that delay.
+    await aTimeout(100);
+    expect(spy.callCount).to.equal(0);
+});
 it('opens on Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -125,10 +117,7 @@ it('opens on Space', async () => {
 });
 it('does not open on Space when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <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>`);
     component.focus();
     await sendKeys({ press: ' ' });
@@ -138,10 +127,7 @@ it('does not open on Space when `disabled`', async () => {
 });
 it('does not open on Space when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
-      <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>`);
     component.focus();
     await sendKeys({ press: ' ' });
@@ -149,14 +135,11 @@ it('does not open on Space when `readonly`', async () => {
     expect(component.open).to.be.false;
     expect(options?.checkVisibility()).to.be.false;
 });
-// See the `document` click listener comment in `dropdown.ts` for an explanation.
+// See the `document` click handler comment in `dropdown.ts` for an explanation.
 it('opens when opened programmatically via the click handler of another element', async () => {
     const div = document.createElement('div');
     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: div });
     const button = document.createElement('button');
     button.addEventListener('click', () => (component.open = true));
@@ -177,15 +160,13 @@ it('closes when something outside of it is clicked', 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);
     document.body.click();
     expect(component.open).to.be.false;
 });
@@ -198,15 +179,13 @@ it('closes on Escape', 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);
     component.focus();
     await sendKeys({ press: 'Escape' });
     expect(component.open).to.be.false;
@@ -227,6 +206,22 @@ it('closes on edit via click', async () => {
         ?.click();
     expect(component.open).to.be.false;
 });
+it('closes when the Add button is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.shadowRoot
+        ?.querySelector('[data-test="add-button"]')
+        ?.click();
+    expect(component.open).to.be.false;
+});
 it('opens when open and enabled programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -236,14 +231,10 @@ it('opens when open and enabled programmatically', 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.disabled = false;
     // Wait for it to open.
@@ -255,14 +246,10 @@ 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-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -272,38 +259,25 @@ it('closes when open and disabled programmatically', async () => {
 });
 it('activates an option on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown 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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
     expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
 });
 it('activates the next option on ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
-    await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
 });
@@ -318,9 +292,9 @@ it('activates the Edit button on ArrowDown', async () => {
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // One's edit button
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
-    await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).true;
     expect(options[0]?.privateIsOpenTooltip).false;
@@ -338,10 +312,10 @@ it('activates the next option on ArrowDown when the Edit button is active', asyn
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // One's edit button
+    await sendKeys({ press: 'ArrowDown' }); // Two
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).false;
     expect(options[1]?.privateActive).to.be.true;
@@ -350,23 +324,15 @@ it('activates the next option on ArrowDown when the Edit button is active', asyn
 });
 it('activates the previous option on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowUp' }); // One
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1]?.focus();
-    expect(options[1]?.privateActive).to.be.true;
-    await sendKeys({ press: 'ArrowUp' });
     expect(options[0]?.privateActive).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
 });
@@ -377,15 +343,20 @@ it('activates the Edit button on on ArrowUp', async () => {
         editable
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+      <glide-core-dropdown-option
+        label="Two"
+        editable
+      ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // One's Edit button
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowDown' }); // Two's Edit button
+    await sendKeys({ press: 'ArrowUp' }); // Two
+    await sendKeys({ press: 'ArrowUp' }); // One's Edit button
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1]?.focus();
-    expect(options[1]?.privateActive).to.be.true;
-    await sendKeys({ press: 'ArrowUp' });
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.true;
     expect(options[0]?.privateIsOpenTooltip).false;
@@ -393,52 +364,70 @@ it('activates the Edit button on on ArrowUp', async () => {
     expect(options[1]?.privateIsEditActive).to.be.false;
     expect(options[1]?.privateIsOpenTooltip).to.be.false;
 });
-it('activates the previous option on ArrowUp when the Edit button is active', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        editable
-      ></glide-core-dropdown-option>
+it('activates previously active option on ArrowUp', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <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);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowDown' }); // Add button
+    await sendKeys({ press: 'ArrowUp' }); // Two
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+});
+it('activates the Edit button on ArrowUp', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
         editable
       ></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({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowDown' }); // Two's Edit button
+    await sendKeys({ press: 'ArrowDown' }); // Add button
+    await sendKeys({ press: 'ArrowUp' }); // Two's Edit button
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.focus();
-    await sendKeys({ press: 'ArrowUp' });
-    await sendKeys({ press: 'ArrowUp' });
-    expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.true;
-    expect(options[1]?.privateActive).to.be.false;
-    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.true;
     expect(options[1]?.privateIsOpenTooltip).to.be.false;
 });
 it('activates the first option on Home', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    expect(options[1].privateActive).to.be.true;
-    options[1].focus();
+    component.focus();
+    await sendKeys({ press: 'End' });
     await sendKeys({ press: 'Home' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.true;
@@ -448,23 +437,15 @@ it('activates the first option on Home', async () => {
 });
 it('activates the first option on PageUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1].focus();
-    expect(options[1]?.privateActive).to.be.true;
+    component.focus();
+    await sendKeys({ press: 'PageDown' });
     await sendKeys({ press: 'PageUp' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.true;
@@ -474,24 +455,17 @@ it('activates the first option on PageUp', async () => {
 });
 it('activates the first option on ArrowUp + Meta', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1].focus();
+    component.focus();
+    await sendKeys({ press: 'End' });
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
     await sendKeys({ up: 'Meta' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.true;
@@ -501,21 +475,14 @@ it('activates the first option on ArrowUp + Meta', async () => {
 });
 it('activates the last option on End', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
+    component.focus();
     await sendKeys({ press: 'End' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.false;
@@ -525,21 +492,14 @@ it('activates the last option on End', async () => {
 });
 it('activates the last option on PageDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
+    component.focus();
     await sendKeys({ press: 'PageDown' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.false;
@@ -549,80 +509,105 @@ it('activates the last option on PageDown', async () => {
 });
 it('activates the last option on Meta + ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
+    component.focus();
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ up: 'Meta' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+});
+it('activates the previously active option when tabbing back from the Add button', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <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>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
     expect(options[0]?.privateIsOpenTooltip).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
     expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[2]?.privateActive).to.be.false;
+    expect(options[2]?.privateIsEditActive).to.be.false;
+    expect(options[2]?.privateIsOpenTooltip).to.be.false;
+});
+it('deactivates the active option when the Add button is tabbed to', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <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>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'Tab' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateActive).to.be.false;
 });
 it('does not wrap on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown 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>`);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[0]?.focus();
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
     await sendKeys({ press: 'ArrowUp' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
 });
 it('does not wrap on ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown 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);
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowDown' }); // Two
     const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    expect(options[1].privateActive).to.be.true;
-    options[1]?.focus();
-    await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
 });
 it('updates `privateSize` on every option when `size` is changed programmatically', async () => {
     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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.size = 'small';
     const options = component.querySelectorAll('glide-core-dropdown-option');
@@ -631,10 +616,7 @@ it('updates `privateSize` on every option when `size` is changed programmaticall
 });
 it('opens when something other than the primary button is 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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const internalLabel = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     assert(internalLabel);