@spectrum-web-components/picker 0.36.0 → 0.37.0

package/test/index.js

@@ -1,5 +1,6 @@
 "use strict";
 import {
+  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -15,7 +16,6 @@ import {
   arrowLeftEvent,
   arrowRightEvent,
   arrowUpEvent,
-  escapeEvent,
   testForLitDevWarnings,
   tEvent
 } from "../../../test/testing-helpers.js";
@@ -32,21 +32,24 @@ import {
 } from "../stories/picker.stories.js";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
-import {
-  isFirefox,
-  isWebKit
-} from "@spectrum-web-components/shared/src/platform.js";
+import { isFirefox } from "@spectrum-web-components/shared/src/platform.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/theme/src/themes.js";
 ignoreResizeObserverLoopError(before, after);
-const isMenuActiveElement = function() {
+const isMenuActiveElement = function(el) {
   var _a;
-  return ((_a = document.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
+  return ((_a = el.shadowRoot.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
 };
 export function runPickerTests() {
   let el;
   const pickerFixture = async () => {
     const test = await fixture(
       html`
-                <div>
+                <sp-theme scale="medium" color="light">
                     <sp-field-label for="picker">
                         Where do you live?
                     </sp-field-label>
@@ -60,11 +63,10 @@ export function runPickerTests() {
                         </sp-menu-item>
                         <sp-menu-item>Feather...</sp-menu-item>
                         <sp-menu-item>Select and Mask...</sp-menu-item>
-                        <sp-menu-divider></sp-menu-divider>
                         <sp-menu-item>Save Selection</sp-menu-item>
                         <sp-menu-item disabled>Make Work Path</sp-menu-item>
                     </sp-picker>
-                </div>
+                </sp-theme>
             `
     );
     return test.querySelector("sp-picker");
@@ -91,6 +93,8 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -121,6 +125,8 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -151,6 +157,8 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
       snapshot = await a11ySnapshot({});
       if (isFirefox()) {
         expect(
@@ -175,13 +183,8 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await pickerFixture();
       await elementUpdated(el);
-    });
-    afterEach(async () => {
-      if (el.open) {
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-      }
+      await nextFrame();
+      await nextFrame();
     });
     it("loads accessibly", async () => {
       await expect(el).to.be.accessible();
@@ -194,7 +197,7 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(el.open).to.be.true;
-      const accessibleCloseButton = document.querySelector(
+      const accessibleCloseButton = el.shadowRoot.querySelector(
         ".visually-hidden button"
       );
       expect(accessibleCloseButton).to.have.attribute(
@@ -210,10 +213,13 @@ export function runPickerTests() {
       expect(document.activeElement).to.eq(el);
     });
     it("accepts new selected item content", async () => {
+      await nextFrame();
+      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(option2);
       await elementUpdated(el);
+      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.include(
         "Select Inverse"
@@ -234,9 +240,11 @@ export function runPickerTests() {
       expect((el.button.textContent || "").trim()).to.include(newLabel2);
     });
     it("accepts new selected item content when open", async () => {
+      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(el);
+      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.include(
         "Select Inverse"
@@ -257,21 +265,27 @@ export function runPickerTests() {
       );
     });
     it("unsets value when children removed", async () => {
+      await nextFrame();
       el.value = "option-2";
       await elementUpdated(el);
+      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.include(
         "Select Inverse"
       );
       const items = el.querySelectorAll("sp-menu-item");
-      const removals = [];
       items.forEach((item) => {
-        const removal = oneEvent(el, "sp-menu-item-removed");
         item.remove();
-        removals.push(removal);
       });
-      await Promise.all(removals);
       await elementUpdated(el);
+      await nextFrame();
+      await aTimeout(150);
+      expect(
+        el.optionsMenu.childItems.length
+      ).to.equal(0);
+      if ("showPopover" in document.createElement("div")) {
+        return;
+      }
       expect(el.value).to.equal("");
       expect((el.button.textContent || "").trim()).to.not.include(
         "Select Inverse"
@@ -298,7 +312,7 @@ export function runPickerTests() {
       item.value = "option-new";
       item.textContent = "New Option";
       el.append(item);
-      await elementUpdated(item);
+      await nextFrame();
       await elementUpdated(el);
       let opened = oneEvent(el, "sp-opened");
       el.open = true;
@@ -316,6 +330,7 @@ export function runPickerTests() {
       expect(el.value, "second time").to.equal("option-new");
     });
     it('manages its "name" value in the accessibility tree', async () => {
+      await nextFrame();
       let snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -326,6 +341,8 @@ export function runPickerTests() {
       ).to.not.be.null;
       el.value = "option-2";
       await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -342,12 +359,16 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(
-        el.optionsMenu.getAttribute("aria-activedescendant")
+        el.optionsMenu.getAttribute(
+          "aria-activedescendant"
+        )
       ).to.equal(firstItem == null ? void 0 : firstItem.id);
       await sendKeys({ press: "ArrowDown" });
       await elementUpdated(el);
       expect(
-        el.optionsMenu.getAttribute("aria-activedescendant")
+        el.optionsMenu.getAttribute(
+          "aria-activedescendant"
+        )
       ).to.equal(secondItem == null ? void 0 : secondItem.id);
     });
     it("renders invalid accessibly", async () => {
@@ -362,6 +383,7 @@ export function runPickerTests() {
       await expect(el).to.be.accessible();
     });
     it("opens with visible focus on a menu item on `DownArrow`", async () => {
+      var _a, _b;
       const firstItem = el.querySelector("sp-menu-item");
       await elementUpdated(el);
       expect(firstItem.focused, "should not visually focused").to.be.false;
@@ -380,12 +402,24 @@ export function runPickerTests() {
       });
       await closed;
       expect(el.open).to.be.false;
-      await waitUntil(() => !firstItem.focused, "not visually focused");
+      expect(
+        document.activeElement === el,
+        `focused ${(_a = document.activeElement) == null ? void 0 : _a.localName} instead of back on Picker`
+      ).to.be.true;
+      expect(
+        el.shadowRoot.activeElement === el.button,
+        `focused ${(_b = el.shadowRoot.activeElement) == null ? void 0 : _b.localName} instead of back on button`
+      ).to.be.true;
+      await waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused"
+      );
     });
-    it("opens without visible focus on a menu item on click", async () => {
+    it("opens, on click, without visible focus on a menu item", async () => {
+      await nextFrame();
+      await nextFrame();
       const firstItem = el.querySelector("sp-menu-item");
-      await elementUpdated(el);
-      const boundingRect = el.getBoundingClientRect();
+      const boundingRect = el.button.getBoundingClientRect();
       expect(firstItem.focused, "not visually focused").to.be.false;
       const opened = oneEvent(el, "sp-opened");
       sendMouse({
@@ -400,10 +434,69 @@ export function runPickerTests() {
         ]
       });
       await opened;
-      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect(firstItem.focused, "still not visually focused").to.be.false;
     });
+    it("opens/closes multiple times", async () => {
+      expect(el.open).to.be.false;
+      const boundingRect = el.button.getBoundingClientRect();
+      let opened = oneEvent(el, "sp-opened");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await opened;
+      expect(el.open).to.be.true;
+      let closed = oneEvent(el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+      opened = oneEvent(el, "sp-opened");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await opened;
+      expect(el.open).to.be.true;
+      closed = oneEvent(el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+    });
     it("closes when becoming disabled", async () => {
       expect(el.open).to.be.false;
       el.click();
@@ -419,11 +512,15 @@ export function runPickerTests() {
       document.body.append(other);
       await elementUpdated(el);
       expect(el.open).to.be.false;
+      const opened = oneEvent(el, "sp-opened");
       el.click();
+      await opened;
       await elementUpdated(el);
       expect(el.open).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
       other.click();
-      await waitUntil(() => !el.open, "closed");
+      closed;
+      await elementUpdated(el);
       other.remove();
     });
     it("selects", async () => {
@@ -435,7 +532,6 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
-      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
@@ -455,31 +551,27 @@ export function runPickerTests() {
         "sp-menu-item:nth-of-type(2)"
       );
       const button = el.button;
-      const opened = oneEvent(el, "sp-opened");
+      let opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
-      await nextFrame();
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
-      const closed = oneEvent(el, "sp-closed");
+      let closed = oneEvent(el, "sp-closed");
       secondItem.click();
       await closed;
-      await nextFrame();
       expect(el.open).to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
       expect(el.value).to.equal("option-2");
-      const opened2 = oneEvent(el, "sp-opened");
+      opened = oneEvent(el, "sp-opened");
       button.click();
-      await opened2;
-      await nextFrame();
+      await opened;
       expect(el.open).to.be.true;
       expect((_c = el.selectedItem) == null ? void 0 : _c.itemText).to.equal("Select Inverse");
       expect(el.value).to.equal("option-2");
-      const closed2 = oneEvent(el, "sp-closed");
+      closed = oneEvent(el, "sp-closed");
       firstItem.click();
-      await closed2;
-      await nextFrame();
+      await closed;
       expect(el.open).to.be.false;
       expect((_d = el.selectedItem) == null ? void 0 : _d.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
@@ -487,7 +579,6 @@ export function runPickerTests() {
     it("dispatches bubbling and composed events", async () => {
       const changeSpy = spy();
       const parent = el.parentElement;
-      parent.attachShadow({ mode: "open" });
       parent.shadowRoot.append(el);
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
@@ -497,11 +588,9 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
-      await elementUpdated(el);
       const closed = oneEvent(el, "sp-closed");
       secondItem.click();
       await closed;
-      await elementUpdated(el);
       expect(el.value).to.equal(secondItem.value);
       expect(changeSpy.calledOnce).to.be.true;
     });
@@ -512,10 +601,9 @@ export function runPickerTests() {
         "sp-menu-item:nth-of-type(2)"
       );
       const button = el.button;
-      let opened = oneEvent(el, "sp-opened");
+      const opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
-      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
@@ -524,14 +612,12 @@ export function runPickerTests() {
         event.preventDefault();
         preventChangeSpy();
       });
-      const closed = oneEvent(el, "sp-closed");
-      opened = oneEvent(el, "sp-opened");
       secondItem.click();
-      await closed;
-      await opened;
-      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
       expect(preventChangeSpy.calledOnce).to.be.true;
       expect(secondItem.selected, "selection prevented").to.be.false;
+      expect(el.open).to.be.true;
     });
     it("can throw focus after `change`", async () => {
       var _a;
@@ -574,20 +660,17 @@ export function runPickerTests() {
       button.dispatchEvent(tEvent());
       await elementUpdated(el);
       expect(el.open, "still closed").to.be.false;
+      const opened = oneEvent(el, "sp-opened");
       button.dispatchEvent(arrowUpEvent());
       await elementUpdated(el);
       expect(el.open, "open by ArrowUp").to.be.true;
-      await waitUntil(
-        () => document.querySelector("active-overlay") !== null,
-        "an active-overlay has been inserted on the page"
-      );
-      button.dispatchEvent(escapeEvent());
-      await elementUpdated(el);
-      await waitUntil(() => el.open === false, "closed by Escape");
-      await waitUntil(
-        () => document.querySelector("active-overlay") === null,
-        "an active-overlay has been inserted on the page"
-      );
+      await opened;
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      expect(el.open).to.be.false;
     });
     it("opens on ArrowDown", async () => {
       var _a, _b;
@@ -601,19 +684,18 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       button.dispatchEvent(arrowDownEvent());
       await opened;
-      await elementUpdated(el);
       expect(el.open, "open by ArrowDown").to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
       const closed = oneEvent(el, "sp-closed");
       firstItem.click();
       await closed;
-      await elementUpdated(el);
       expect(el.open).to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
     });
     it("quick selects on ArrowLeft/Right", async () => {
+      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -641,6 +723,7 @@ export function runPickerTests() {
       expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
     });
     it("quick selects first item on ArrowRight when no value", async () => {
+      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -656,8 +739,12 @@ export function runPickerTests() {
     it("loads", async () => {
       expect(el).to.not.be.undefined;
     });
-    it("refocuses on list when open", async () => {
+    it("closes when focusing away from the menu", async () => {
       const firstItem = el.querySelector("sp-menu-item");
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      const button = el.button;
       const input = document.createElement("input");
       el.insertAdjacentElement("afterend", input);
       el.focus();
@@ -665,44 +752,74 @@ export function runPickerTests() {
       expect(document.activeElement === input).to.be.true;
       await sendKeys({ press: "Shift+Tab" });
       expect(document.activeElement === el).to.be.true;
-      await sendKeys({ press: "Enter" });
       const opened = oneEvent(el, "sp-opened");
-      el.open = true;
+      sendKeys({ press: "Enter" });
       await opened;
       await elementUpdated(el);
       await waitUntil(
         () => firstItem.focused,
         "The first items should have become focused visually."
       );
-      el.blur();
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      button.focus();
+      await closed;
+      expect(isMenuActiveElement(el)).to.be.false;
+      expect(el.open).to.be.false;
+    });
+    it("does not listen to streaming `Enter` keydown", async () => {
+      const openSpy = spy();
+      const closedSpy = spy();
+      el.addEventListener("sp-opened", () => openSpy());
+      el.addEventListener("sp-closed", () => closedSpy());
+      const firstItem = el.querySelector("sp-menu-item");
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      const input = document.createElement("input");
+      el.insertAdjacentElement("afterend", input);
       el.focus();
-      await elementUpdated(el);
+      await sendKeys({ press: "Tab" });
+      expect(document.activeElement === input).to.be.true;
+      await sendKeys({ press: "Shift+Tab" });
+      expect(document.activeElement === el).to.be.true;
+      const opened = oneEvent(el, "sp-opened");
+      sendKeys({ down: "Enter" });
+      await opened;
+      await aTimeout(300);
+      expect(openSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
       await waitUntil(
-        () => isMenuActiveElement(),
-        "first item refocused"
+        () => firstItem.focused,
+        "The first items should have become focused visually."
       );
-      expect(el.open).to.be.true;
-      expect(isMenuActiveElement()).to.be.true;
       await sendKeys({ press: "ArrowDown" });
-      await sendKeys({ press: "ArrowUp" });
-      expect(firstItem.focused).to.be.true;
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({ down: "Enter" });
+      await closed;
+      await aTimeout(300);
+      expect(el.value).to.equal(thirdItem.value);
+      expect(openSpy.callCount).to.equal(1);
+      expect(closedSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
     });
-    it("does not allow tabing to close", async () => {
+    it("allows tabing to close", async () => {
+      const input = document.createElement("input");
+      el.insertAdjacentElement("afterend", input);
+      const opened = oneEvent(el, "sp-opened");
       el.open = true;
-      await elementUpdated(el);
+      await opened;
+      await nextFrame();
       expect(el.open).to.be.true;
       el.focus();
-      await elementUpdated(el);
-      await waitUntil(
-        () => isMenuActiveElement(),
-        "first item refocused"
-      );
-      expect(el.open).to.be.true;
-      expect(isMenuActiveElement()).to.be.true;
-      await sendKeys({ press: "Tab" });
-      expect(el.open, "stays open").to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({ press: "Tab" });
+      await closed;
+      expect(el.open, "closes").to.be.false;
     });
     describe("tab order", () => {
       let input1;
@@ -757,51 +874,7 @@ export function runPickerTests() {
           input1
         );
       });
-      it('traps tab in the menu as a `type="modal"` overlay forward', async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        sendKeys({ press: "ArrowDown" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(
-          () => isMenuActiveElement(),
-          "first item focused"
-        );
-        const activeElement = document.activeElement;
-        if (!isWebKit()) {
-          const blured = oneEvent(activeElement, "blur");
-          sendKeys({ press: "Tab" });
-          await blured;
-          expect(el.open, "picker still open").to.be.true;
-          expect(document.activeElement === input1).to.be.false;
-          expect(document.activeElement === input2).to.be.false;
-        }
-      });
-      it('traps tab in the menu as a `type="modal"` overlay backwards', async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        await sendKeys({ press: "ArrowDown" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(
-          () => isMenuActiveElement(),
-          "first item focused"
-        );
-        const activeElement = document.activeElement;
-        if (!isWebKit()) {
-          const blured = oneEvent(activeElement, "blur");
-          sendKeys({ press: "Shift+Tab" });
-          await blured;
-          expect(el.open, "picker still open").to.be.true;
-          expect(document.activeElement === input1).to.be.false;
-          expect(document.activeElement === input2).to.be.false;
-        }
-      });
-      it("can close and immediate tab to the next tab stop", async () => {
+      it("can close and immediately tab to the next tab stop", async () => {
         el.focus();
         await nextFrame();
         expect(document.activeElement, "focuses el").to.equal(el);
@@ -810,7 +883,7 @@ export function runPickerTests() {
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(),
+          () => isMenuActiveElement(el),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -827,13 +900,13 @@ export function runPickerTests() {
       it("can close and immediate shift+tab to the previous tab stop", async () => {
         el.focus();
         await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
+        expect(document.activeElement === el, "focuses el").to.be.true;
         const opened = oneEvent(el, "sp-opened");
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(),
+          () => isMenuActiveElement(el),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -842,7 +915,7 @@ export function runPickerTests() {
         expect(el.open).to.be.false;
         expect(document.activeElement === el).to.be.true;
         const focused = oneEvent(input1, "focus");
-        await sendKeys({ press: "Shift+Tab" });
+        sendKeys({ press: "Shift+Tab" });
         await focused;
         expect(el.open).to.be.false;
         expect(document.activeElement === input1).to.be.true;
@@ -857,8 +930,9 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
     });
     it("scrolls selected into view on open", async () => {
-      await el.generatePopover();
-      el.popoverEl.style.height = "40px";
+      const styles = document.createElement("style");
+      styles.innerText = "sp-popover { height: 40px; }";
+      el.shadowRoot.append(styles);
       const firstItem = el.querySelector(
         "sp-menu-item:first-child"
       );
@@ -868,11 +942,15 @@ export function runPickerTests() {
       lastItem.disabled = false;
       el.value = lastItem.value;
       await elementUpdated(el);
+      const opened = oneEvent(el, "sp-opened");
       el.open = true;
-      await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item focused");
+      await opened;
+      await waitUntil(
+        () => isMenuActiveElement(el),
+        "first item focused"
+      );
       const getParentOffset = (el2) => {
-        const parentScroll = el2.parentElement.scrollTop;
+        const parentScroll = el2.assignedSlot.parentElement.scrollTop;
         const parentOffset = el2.offsetTop - parentScroll;
         return parentOffset;
       };
@@ -881,7 +959,9 @@ export function runPickerTests() {
       lastItem.dispatchEvent(
         new FocusEvent("focusin", { bubbles: true })
       );
-      lastItem.dispatchEvent(arrowDownEvent());
+      await sendKeys({
+        press: "ArrowDown"
+      });
       await elementUpdated(el);
       await nextFrame();
       expect(getParentOffset(lastItem)).to.be.greaterThan(40);
@@ -905,7 +985,6 @@ export function runPickerTests() {
                             <sp-menu-item value="1">
                                 I'm already using them
                             </sp-menu-item>
-                            <sp-menu-divider></sp-menu-divider>
                             <sp-menu-item value="2">Soon</sp-menu-item>
                             <sp-menu-item value="3">
                                 As part of my next project
@@ -919,6 +998,8 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await groupedFixture();
       await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
     });
     it("selects the item with a matching value in a group", async () => {
       const item = el.querySelector("#should-be-selected");
@@ -944,7 +1025,6 @@ export function runPickerTests() {
                             </sp-menu-item>
                             <sp-menu-item>Feather...</sp-menu-item>
                             <sp-menu-item>Select and Mask...</sp-menu-item>
-                            <sp-menu-divider></sp-menu-divider>
                             <sp-menu-item>Save Selection</sp-menu-item>
                             <sp-menu-item disabled>Make Work Path</sp-menu-item>
                         </sp-picker>
@@ -956,6 +1036,7 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await pickerFixture2();
       await elementUpdated(el);
+      await nextFrame();
     });
     afterEach(async () => {
       if (el.open) {
@@ -987,7 +1068,6 @@ export function runPickerTests() {
                                 </sp-menu-item>
                                 <sp-menu-item>Feather...</sp-menu-item>
                                 <sp-menu-item>Select and Mask...</sp-menu-item>
-                                <sp-menu-divider></sp-menu-divider>
                                 <sp-menu-item>Save Selection</sp-menu-item>
                                 <sp-menu-item disabled>
                                     Make Work Path
@@ -1041,6 +1121,7 @@ export function runPickerTests() {
       beforeEach(async () => {
         el = await pickerFixture2();
         await elementUpdated(el);
+        await nextFrame();
       });
       afterEach(async () => {
         if (el.open) {
@@ -1057,7 +1138,6 @@ export function runPickerTests() {
         const opened = oneEvent(el, "sp-opened");
         el.button.click();
         await opened;
-        await elementUpdated(el);
         expect(el.open).to.be.true;
         expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
         expect(el.value).to.equal("");
@@ -1077,6 +1157,7 @@ export function runPickerTests() {
         `);
     const el2 = test.querySelector("sp-picker");
     await elementUpdated(el2);
+    await nextFrame();
     let snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -1087,6 +1168,9 @@ export function runPickerTests() {
     ).to.not.be.null;
     el2.value = "2";
     await elementUpdated(el2);
+    await nextFrame();
+    await nextFrame();
+    expect(el2.value).to.equal("2");
     snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -1099,6 +1183,8 @@ export function runPickerTests() {
   it("toggles between pickers", async () => {
     const el2 = await pickerFixture();
     const el1 = await pickerFixture();
+    el1.parentElement.style.float = "left";
+    el2.parentElement.style.float = "left";
     el1.id = "away";
     el2.id = "other";
     await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
@@ -1119,8 +1205,8 @@ export function runPickerTests() {
     closed = oneEvent(el2, "sp-closed");
     el1.click();
     await Promise.all([open, closed]);
-    expect(el1.open).to.be.true;
     expect(el2.open).to.be.false;
+    expect(el1.open).to.be.true;
     closed = oneEvent(el1, "sp-closed");
     sendKeys({
       press: "Escape"
@@ -1129,7 +1215,7 @@ export function runPickerTests() {
     expect(el1.open).to.be.false;
   });
   it("displays selected item text by default", async () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const el2 = await fixture(
       html`
                 <sp-picker
@@ -1140,12 +1226,12 @@ export function runPickerTests() {
                     <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
                     <sp-menu-item>Feather...</sp-menu-item>
                     <sp-menu-item>Select and Mask...</sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
             `
     );
+    await nextFrame();
     await elementUpdated(el2);
     await waitUntil(
       () => {
@@ -1171,16 +1257,21 @@ export function runPickerTests() {
     const opened = oneEvent(el2, "sp-opened");
     sendKeys({ press: "Enter" });
     await opened;
-    await elementUpdated(el2.optionsMenu);
     expect(
-      el2.optionsMenu === document.activeElement,
+      el2 === document.activeElement,
       `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`
     ).to.be.true;
+    expect(
+      el2.optionsMenu === el2.shadowRoot.activeElement,
+      `activeElement is ${(_e = el2.shadowRoot.activeElement) == null ? void 0 : _e.localName}`
+    ).to.be.true;
     expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
     expect(secondItem.focused, 'secondItem "focused"').to.be.true;
-    expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(
-      secondItem.id
-    );
+    expect(
+      el2.optionsMenu.getAttribute(
+        "aria-activedescendant"
+      )
+    ).to.equal(secondItem.id);
   });
   it("resets value when item not available", async () => {
     var _a;
@@ -1194,7 +1285,6 @@ export function runPickerTests() {
                     <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
                     <sp-menu-item>Feather...</sp-menu-item>
                     <sp-menu-item>Select and Mask...</sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
@@ -1262,15 +1352,11 @@ export function runPickerTests() {
     await elementUpdated(el2);
     expect(openedSpy.calledOnce).to.be.true;
     expect(closedSpy.calledOnce).to.be.false;
-    const openedEvent = openedSpy.args[0][0];
-    expect(openedEvent.detail.interaction).to.equal("modal");
     const closed = oneEvent(el2, "sp-closed");
     el2.open = false;
     await closed;
     await elementUpdated(el2);
     expect(closedSpy.calledOnce).to.be.true;
-    const closedEvent = closedSpy.args[0][0];
-    expect(closedEvent.detail.interaction).to.equal("modal");
   });
 }
 //# sourceMappingURL=index.js.map