@ukic/canary-web-components 2.0.0-canary.24 → 2.0.0-canary.26

package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.e2e.js

@@ -1,2040 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-beforeAll(() => {
-    jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-const options = `[
-  { label: 'Test label 1', value: 'Test value 1' },
-  { label: 'Test label 2', value: 'Test value 2' },
-  { label: 'Test label 3', value: 'Test value 3' },
-]`;
-const optionsWithDuplicate = `[
-  { label: 'Test label 1', value: 'Test value 1' },
-  { label: 'Test label 2', value: 'Test value 2' },
-  { label: 'Test label 3', value: 'Test value 3' },
-  { label: 'Parent',
-    children: [
-      { label: 'Test label 1', value: 'Test value 1' },
-      { label: 'Test label 2', value: 'Test value 2' },
-      { label: 'Test label 4', value: 'Test value 4' },
-    ]
-  },
-  { label: 'Test label 3', value: 'Test value 3' },
-  { label: 'Test label 3 diff label', value: 'Test value 3' },
-]`;
-const largeOptions = `[
-  { label: 'Test label 1', value: 'Test value 1' },
-  { label: 'Test label 2', value: 'Test value 2' },
-  { label: 'Test label 3', value: 'Test value 3' },
-  { label: 'Test label 4', value: 'Test value 4' },
-  { label: 'Test label 5', value: 'Test value 5' },
-  { label: 'Test label 6', value: 'Test value 6' },
-  { label: 'Test label 7', value: 'Test value 7' },
-  { label: 'Test label 8', value: 'Test value 8' },
-  { label: 'Test label 9', value: 'Test value 9' },
-  { label: 'Test label 10', value: 'Test value 10' },
-]`;
-const searchableOptions = `[
-  { label: "Cappuccino", value: "Cap" },
-  { label: "Latte", value: "Lat" },
-  { label: "Americano", value: "Ame" },
-  { label: "Filter", value: "Fil" },
-  { label: "Flat white", value: "Fla" },
-  { label: "Mocha", value: "Moc" },
-  { label: "Macchiato", value: "Mac" },
-]`;
-const optionsWithDisabled = `[
-  { label: 'Test label 1', value: 'Test value 1', disabled: true },
-  { label: 'Test label 2', value: 'Test value 2' },
-  { label: 'Test label 3', value: 'Test value 3', disabled: true },
-  { label: 'Test label 4', value: 'Test value 4', disabled: true },
-  { label: 'Test label 5', value: 'Test value 5' },
-]`;
-const optionsWithGroups = `[
-  { label: 'Test label 1', value: 'Test value 1' },
-  { label: 'Test label 2', value: 'Test value 2' },
-  { label: 'Group', children: [
-    { label: 'Test label 3', value: 'Test value 3' },
-  ] },
-]`;
-const getTestSelect = (options) => `<ic-select-with-multi label="IC Select Test"></ic-select-with-multi>
-  <script>
-    var select = document.querySelector('ic-select-with-multi');
-    select.options = ${options};
-    select.addEventListener('icChange', function (event) {
-      option = event.detail.value;
-      select.value = option;
-    });
-  </script>`;
-const getTestSelectFormReset = (options) => `<form><ic-select-with-multi label="IC Select Test"></ic-select-with-multi><button type="reset" id="resetButton">Reset</button></form>
-    <script>
-      var select = document.querySelector('ic-select-with-multi');
-      select.options = ${options};
-      select.addEventListener('icChange', function (event) {
-        option = event.detail.value;
-        select.value = option;
-      });
-    </script>`;
-const getTestSelectSearchableFormReset = (options) => `<form><ic-select-with-multi label="IC Select Test" searchable></ic-select-with-multi><button type="reset" id="resetButton">Reset</button></form>
-    <script>
-      var select = document.querySelector('ic-select-with-multi');
-      select.options = ${options};
-      select.value = 'Test value 1';
-      select.addEventListener('icChange', function (event) {
-        option = event.detail.value;
-        select.value = option;
-      });
-    </script>`;
-const getTestSearchableSelect = (options) => `<ic-select-with-multi label="IC Select Test" searchable></ic-select-with-multi><button>Button</button>
-    <script>
-      var select = document.querySelector('ic-select-with-multi');
-      select.options = ${options};
-    </script>`;
-const getTestSearchableSelectAsync = () => `<ic-select-with-multi label="IC Select Test" searchable disable-filter="true" value="Test value"></ic-select-with-multi>
-    <script>
-      var select = document.querySelector('ic-select-with-multi');
-      select.options = [];
-      window.setTimeout(() => {
-        select.options = []
-      }, 800)
-    </script>`;
-const getTestSelectAsync = (firstDataset, secondDataset) => `<ic-select-with-multi label="IC Select Test" value="Test value"></ic-select-with-multi>
-      <script>
-        var select = document.querySelector('ic-select-with-multi');
-        select.options = ${firstDataset};
-        window.setTimeout(() => {
-          select.options = ${secondDataset}
-        }, 1500)
-      </script>`;
-const getTestMultiSelect = (options) => `<ic-select-with-multi label="IC Select Test" multiple="true"></ic-select-with-multi>
-  <script>
-    var select = document.querySelector('ic-select-with-multi');
-    select.options = ${options};
-    select.addEventListener('icChange', function (event) {
-      option = event.detail.value;
-      select.value = option;
-    });
-  </script>`;
-const getMenuVisibility = async (page) => {
-    return await page.evaluate(() => {
-        const menu = document
-            .querySelector("ic-select-with-multi")
-            .shadowRoot.querySelector("ic-menu-with-multi #ic-select-input-0-menu");
-        return window.getComputedStyle(menu).visibility;
-    });
-};
-const focusAndTypeIntoInput = async (value, page) => {
-    await page.$eval("ic-select-with-multi", (el) => {
-        const input = el.shadowRoot.querySelector("input");
-        input.focus();
-    });
-    value.split("").forEach(async (char) => {
-        await page.keyboard.press(char);
-    });
-};
-describe("ic-select-with-multi", () => {
-    describe("custom", () => {
-        it("should render", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi");
-            expect(select).not.toBeNull();
-        });
-        it("should render when no options are provided", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<ic-select-with-multi label="IC Select Test"></ic-select-with-multi>`);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi");
-            expect(select).not.toBeNull();
-        });
-        it("should open, set focus on menu and set aria-expanded to 'true' when input clicked", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            expect(select.getAttribute("aria-expanded")).toBeTruthy();
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0-menu");
-        });
-        it("should render options correctly", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(3);
-            expect(menuOptions[0]).toEqualText("Test label 1");
-            expect(menuOptions[1]).toEqualText("Test label 2");
-            expect(menuOptions[2]).toEqualText("Test label 3");
-        });
-        it("should deduplicate options and warn about duplicate", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(optionsWithDuplicate));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(4);
-            expect(menuOptions[0]).toEqualText("Test label 1");
-            expect(menuOptions[1]).toEqualText("Test label 2");
-            expect(menuOptions[2]).toEqualText("Test label 3");
-            expect(menuOptions[3]).toEqualText("Test label 4");
-            // We can't test for ic-warn being called because it's already called seven times over 'hiddeninputvalue' changing
-        });
-        it("should call icChange when the selected option is changed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await select.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "Test value 1",
-            });
-        });
-        describe("when no option is selected", () => {
-            it("should open menu, apply focus style on first option and set as value when Down Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                expect(await getMenuVisibility(page)).toBe("visible");
-                const firstOption = await menu.findAll("li");
-                expect(firstOption[0]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 1");
-            });
-            it("should open menu when Space is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press(" ");
-                await page.waitForChanges();
-                expect(await getMenuVisibility(page)).toBe("visible");
-            });
-            it("should open menu when Enter is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("Enter");
-                await page.waitForChanges();
-                await page.waitForTimeout(1000);
-                expect(await getMenuVisibility(page)).toBe("visible");
-            });
-            it("should open menu, apply focus style on last option and set as value when Up Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowUp");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                expect(await getMenuVisibility(page)).toBe("visible");
-                const lastOption = await menu.findAll("li");
-                expect(lastOption[2]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 3");
-            });
-            it("should keep menu closed when Backspace, Home, End and Escape are pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("Backspace");
-                await page.waitForChanges();
-                expect(await getMenuVisibility(page)).toBe("hidden");
-                await select.press("Home");
-                await page.waitForChanges();
-                expect(await getMenuVisibility(page)).toBe("hidden");
-                await select.press("End");
-                await page.waitForChanges();
-                expect(await getMenuVisibility(page)).toBe("hidden");
-                await select.press("Escape");
-                await page.waitForChanges();
-                expect(await getMenuVisibility(page)).toBe("hidden");
-            });
-        });
-        describe("when an option is selected", () => {
-            it("should move focus to next option and set as value when Down Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await select.press("ArrowDown");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const secondOption = await menu.findAll("li");
-                expect(secondOption[1]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 2");
-            });
-            it("should move focus to first option and set as value when focus is on last option and Down Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowUp");
-                await select.press("ArrowDown");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const firstOption = await menu.findAll("li");
-                expect(firstOption[0]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 1");
-            });
-            it("should move focus to previous option and set as value when Up Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowUp");
-                await select.press("ArrowUp");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const secondOption = await menu.findAll("li");
-                expect(secondOption[1]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 2");
-            });
-            it("should move focus to last option and set as value when focus is on first option and Up Arrow is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await select.press("ArrowUp");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const lastOption = await menu.findAll("li");
-                expect(lastOption[2]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 3");
-            });
-            it("should move focus to first option and set as value when Home is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowUp");
-                await page.keyboard.press("Home");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const firstOption = await menu.findAll("li");
-                expect(firstOption[0]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 1");
-            });
-            it("should move focus to last option and set as value when End is pressed", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await page.keyboard.press("End");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const lastOption = await menu.findAll("li");
-                expect(lastOption[2]).toHaveClass("focused-option");
-                expect(select).toEqualText("Test label 3");
-            });
-            it("should display a check next to the selected option and set aria-selected", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const firstOption = await menu.findAll("li");
-                expect(firstOption[0].getAttribute("aria-selected")).toBeTruthy;
-                expect(await firstOption[0].find(".check-icon")).not.toBeNull;
-                expect(firstOption[1].getAttribute("aria-selected")).toBeFalsy;
-                expect(await firstOption[1].find(".check-icon")).toBeNull;
-            });
-            it("should display a check next to the selected option and set aria-selected when a default value is applied", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                await page.waitForChanges();
-                const icSelect = await page.find("ic-select-with-multi");
-                icSelect.setAttribute("value", "Test value 1");
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const firstOption = await menu.findAll("li");
-                expect(firstOption[0]).toHaveAttribute("aria-selected");
-                expect(await firstOption[0].find(".check-icon")).not.toBeNull;
-            });
-            it("should display clear button if the 'show-clear-button' prop is supplied and an option is selected", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                let clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                expect(clearButton).toBeNull();
-                const icSelect = await page.find("ic-select-with-multi");
-                icSelect.setAttribute("show-clear-button", true);
-                await page.waitForChanges();
-                clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                expect(clearButton).toBeNull();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await page.keyboard.press("Enter");
-                await page.waitForChanges();
-                clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                expect(clearButton).not.toBeNull();
-            });
-            it("should clear the input if the clear button is clicked", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(options));
-                const icSelect = await page.find("ic-select-with-multi");
-                icSelect.setAttribute("show-clear-button", true);
-                await page.waitForChanges();
-                const icChange = await page.spyOnEvent("icChange");
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("ArrowDown");
-                await page.keyboard.press("Enter");
-                await page.waitForChanges();
-                let clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                await clearButton.click();
-                await page.waitForChanges();
-                expect(select).toEqualText("Select an option");
-                expect(icChange).toHaveReceivedEventDetail({
-                    value: null,
-                });
-                clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                expect(clearButton).toBe(null);
-            });
-        });
-        it("should close menu when input is clicked while open and set focus on it", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            await select.click();
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should close menu when an option is clicked, set as value and move focus onto the input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            await menu.click();
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "Test value 2",
-            });
-            expect(select).toEqualText("Test label 2");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should close menu when Space is pressed and move focus to the input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press(" ");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should close menu when Enter is pressed and set focus to the input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should close menu when Escape is pressed and set focus to the input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Escape");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should close menu when another element on the page is clicked", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`${getTestSelect(options)}<button>Test button</button>`);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const button = await page.find("button");
-            await button.click();
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-        });
-        it("should close menu when Tab is pressed to move focus onto the next element on the page", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`${getTestSelect(options)}<button>Test button</button>`);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-        });
-        it("should close menu when Shift + Tab is pressed to move focus onto the input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`${getTestSelect(options)}`);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            await page.keyboard.down("Shift");
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.up("Shift");
-            await page.waitForChanges();
-            await page.waitForTimeout(1000);
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0");
-        });
-        it("should display the label of the value passed in using the 'value' prop as the selected option", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("value", "Test value 2");
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            expect(select).toEqualText("Test label 2");
-        });
-        it("should render options with descriptions", async () => {
-            const page = await newE2EPage();
-            const optionsWithDescription = `[
-        { label: 'Test label 1', value: 'Test value 1', description: 'Test description 1' },
-        { label: 'Test label 2', value: 'Test value 2' },
-        { label: 'Test label 3', value: 'Test value 3' },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithDescription));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const firstOptionDescription = await menu.find("li .option-description");
-            expect(firstOptionDescription).toEqualText("Test description 1");
-        });
-        it("should render the placeholder", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("placeholder", "Test placeholder");
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            expect(select).toEqualText("Test placeholder");
-        });
-        it("should render as disabled correctly", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("disabled", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            expect(select).toHaveAttribute("disabled");
-            await select.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("hidden");
-        });
-        it("should prevent click on disabled options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(optionsWithDisabled));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            await menu.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-        });
-        it("should set aria-disabled and skip focus when option disabled", async () => {
-            const page = await newE2EPage();
-            const optionsWithFirstDisabled = `[
-        { label: 'Test label 1', value: 'Test value 1', disabled: true },
-        { label: 'Test label 2', value: 'Test value 2' },
-        { label: 'Test label 3', value: 'Test value 3' },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithFirstDisabled));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions[0]).toHaveAttribute("aria-disabled");
-            expect(menuOptions[1]).toHaveClass("focused-option");
-        });
-        it("should render as required correctly", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("required", true);
-            await page.waitForChanges();
-            const label = await page.find("ic-select-with-multi >>> ic-input-label");
-            expect(label).toEqualText("IC Select Test *");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            expect(select.getAttribute("aria-label").includes("required")).toBeTruthy();
-        });
-        it("should render selected value as text when read-only", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("value", "Test value 1");
-            icSelect.setAttribute("readonly", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            const typography = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("ic-typography"), (typography) => typography.innerText));
-            expect(select).toBe(null);
-            expect(typography[1]).toBe("Test label 1");
-        });
-        it("should render options as groups if they have children", async () => {
-            const page = await newE2EPage();
-            const groupedOptions = `[
-        {
-          label: 'Test group',
-          children: [
-            { label: 'Test label 1', value: 'Test value 1' },
-            { label: 'Test label 2', value: 'Test value 2' },
-            { label: 'Test label 3', value: 'Test value 3' },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSelect(groupedOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const optionGroupTitle = await page.find("ic-select-with-multi >>> ic-menu-with-multi >>> .option-group-title");
-            expect(optionGroupTitle).not.toBeNull();
-            const optionsText = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("ic-menu-with-multi ic-typography"), (typography) => typography.innerText));
-            expect(optionsText[0]).toBe("Test group");
-        });
-        it("should render and focus child options correctly", async () => {
-            const page = await newE2EPage();
-            const groupedOptions = `[
-        {
-          label: 'Test group',
-          children: [
-            { label: 'Test label 1', value: 'Test value 1' },
-            { label: 'Test label 2', value: 'Test value 2' },
-            { label: 'Test label 3', value: 'Test value 3' },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSelect(groupedOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const childOptions = await menu.findAll("li");
-            expect(childOptions).toHaveLength(3);
-            expect(childOptions[0]).toEqualText("Test label 1");
-            expect(childOptions[1]).toEqualText("Test label 2");
-            expect(childOptions[2]).toEqualText("Test label 3");
-            expect(childOptions[0]).toHaveClass("focused-option");
-        });
-        it("should render options at the top of the menu if they are recommended", async () => {
-            const page = await newE2EPage();
-            const optionsWithRecommended = `[
-        { label: 'Test label 1', value: 'Test value 1' },
-        { label: 'Test label 2', value: 'Test value 2', recommended: true },
-        { label: 'Test label 3', value: 'Test value 3' },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithRecommended));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const firstOption = await menu.findAll("li");
-            expect(firstOption[0]).toEqualText("Test label 2");
-        });
-        it("should set aria-invalid if validation status is 'error'", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("validation-status", "error");
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            expect(select).toHaveAttribute("aria-invalid");
-        });
-        it("should set the aria-label correctly if an option has a description", async () => {
-            const page = await newE2EPage();
-            const optionsWithDescription = `[
-        { label: 'Test label 1', value: 'Test value 1', description: 'Test description 1' },
-        { label: 'Test label 2', value: 'Test value 2' },
-        { label: 'Test label 3', value: 'Test value 3' },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithDescription));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const firstOption = await menu.findAll("li");
-            expect(firstOption[0].getAttribute("aria-label")).toBe("Test label 1, Test description 1");
-        });
-        it("should set the aria-label correctly if an option is within a group", async () => {
-            const page = await newE2EPage();
-            const optionsWithDescription = `[
-        {
-          label: 'Test group',
-          children: [
-            { label: 'Test label 1', value: 'Test value 1' },
-            { label: 'Test label 2', value: 'Test value 2' },
-            { label: 'Test label 3', value: 'Test value 3' },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithDescription));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const firstOption = await menu.findAll("li");
-            expect(firstOption[0].getAttribute("aria-label")).toBe("Test label 1, Test group group");
-        });
-        it("should set the aria-label correctly if an option has a description and is within a group", async () => {
-            const page = await newE2EPage();
-            const optionsWithDescription = `[
-        {
-          label: 'Test group',
-          children: [
-            { label: 'Test label 1', value: 'Test value 1', description: 'Test description 1' },
-            { label: 'Test label 2', value: 'Test value 2' },
-            { label: 'Test label 3', value: 'Test value 3' },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSelect(optionsWithDescription));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const firstOption = await menu.findAll("li");
-            expect(firstOption[0].getAttribute("aria-label")).toBe("Test label 1, Test description 1, Test group group");
-        });
-        it("should call icFocus when focused", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<button>Test button</button>${getTestSelect(options)}`);
-            await page.waitForChanges();
-            const button = await page.find("button");
-            await button.focus();
-            await page.waitForChanges();
-            const icFocus = await page.spyOnEvent("icFocus");
-            await page.keyboard.down("Tab");
-            await page.waitForChanges();
-            expect(icFocus).toHaveReceivedEvent();
-        });
-        it("should call icBlur when it loses focus", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const icBlur = await page.spyOnEvent("icBlur");
-            await page.keyboard.down("Tab");
-            await page.keyboard.down("Tab");
-            await page.waitForChanges();
-            expect(icBlur).toHaveReceivedEvent();
-        });
-        describe("loading", () => {
-            it("should display a loading message and then the options when fetching options externally", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" loading="true"></ic-select-with-multi>
-        <script>
-          var select = document.querySelector('ic-select-with-multi');
-          select.options = [];
-          select.addEventListener('icChange', function (event) {
-            option = event.detail.value;
-            select.value = option;
-          });
-          setTimeout(() => {
-            select.options = [
-              { label: 'Test label 1', value: 'Test value 1' },
-              { label: 'Test label 2', value: 'Test value 2' },
-              { label: 'Test label 3', value: 'Test value 3' },
-            ];
-          }, 1000);
-        </script>`);
-                await page.waitForChanges();
-                let firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toEqualText("Loading...");
-                await page.waitForTimeout(1500);
-                firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toEqualText("Test label 1");
-                const icSelect = await page.find("ic-select-with-multi");
-                expect(icSelect.getAttribute("loading")).toBeFalsy;
-            });
-            it("should display a retry button and a custom loading error when it times out and should not update the options", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" loading="true" timeout="500" options="[]" loading-error-label="Error"></ic-select-with-multi>`);
-                await page.waitForChanges();
-                let firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toEqualText("Loading...");
-                await page.waitForTimeout(560);
-                firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li ic-typography");
-                expect(firstOption).toEqualText("Error");
-                const retryButton = await page.find("ic-select-with-multi >>> #retry-button");
-                expect(retryButton).not.toBeNull;
-                await page.waitForTimeout(1500);
-                firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li ic-typography");
-                expect(firstOption).toEqualText("Error");
-            });
-            it("should focus the retry button on tab and emit icBlur and close the menu when blurring", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" loading="true" timeout="500" options="[]" loading-error-label="Error"></ic-select-with-multi>`);
-                await page.waitForChanges();
-                await page.waitForTimeout(560);
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                await page.keyboard.press("Tab");
-                await page.waitForChanges();
-                const icBlur = await page.spyOnEvent("icBlur");
-                expect(icBlur).not.toHaveReceivedEvent();
-                const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-                expect(activeElId).toBe("retry-button");
-                await page.keyboard.press("Tab");
-                await page.waitForChanges();
-                expect(icBlur).toHaveReceivedEvent();
-            });
-            it("should retry loading and keep the menu open when retry button is clicked", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" loading="true" timeout="500"></ic-select-with-multi>
-        <script>
-          var select = document.querySelector('ic-select-with-multi');
-          select.options = [];
-          select.addEventListener('icChange', function (event) {
-            option = event.detail.value;
-            select.value = option;
-          });
-          select.addEventListener('icRetryLoad', function () {
-            select.loading = true;
-          });
-        </script>`);
-                await page.waitForChanges();
-                const icRetryLoad = await page.spyOnEvent("icRetryLoad");
-                await page.waitForTimeout(560);
-                let firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li ic-typography");
-                expect(firstOption).toEqualText("Loading Error");
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                const retryButton = await page.find("ic-select-with-multi >>> #retry-button");
-                await retryButton.click();
-                await page.waitForChanges();
-                expect(icRetryLoad).toHaveReceivedEvent;
-                firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toEqualText("Loading...");
-                expect(await getMenuVisibility(page)).toBe("visible");
-            });
-            it("should retry loading and keep the menu open when retry button is pressed with Enter", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" loading="true" options="[]" timeout="500"></ic-select-with-multi>`);
-                await page.waitForChanges();
-                const icRetryLoad = await page.spyOnEvent("icRetryLoad");
-                await page.waitForTimeout(560);
-                const firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li ic-typography");
-                expect(firstOption).toEqualText("Loading Error");
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                const retryButton = await page.find("ic-select-with-multi >>> #retry-button");
-                await retryButton.press("Enter");
-                await page.waitForChanges();
-                expect(icRetryLoad).toHaveReceivedEvent;
-                expect(await getMenuVisibility(page)).toBe("visible");
-            });
-            it("should render a No results message if no options are provided on render", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSelect(`[]`));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const menuOptions = await menu.findAll("li");
-                expect(menuOptions).toHaveLength(1);
-                expect(menuOptions[0]).toEqualText("No results found");
-            });
-        });
-    });
-    describe("searchable", () => {
-        it("should open menu when character is entered in input field and filter options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("c");
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(4);
-            expect(menuOptions[0]).toEqualText("Cappuccino");
-            expect(menuOptions[1]).toEqualText("Americano");
-            expect(menuOptions[2]).toEqualText("Mocha");
-            expect(menuOptions[3]).toEqualText("Macchiato");
-        });
-        it("should keep the same options when characters are entered and the menu is reopened", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("foo", page);
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            let menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0]).toEqualText("No results found");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            select.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            select.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0]).toEqualText("No results found");
-        });
-        it("should display no results state when search term matches none of the options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("z");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0]).toEqualText("No results found");
-        });
-        it("should filter options accordingly when Backspace is pressed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("f");
-            await page.waitForChanges();
-            await select.press("i");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            let menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            await select.press("Backspace");
-            await page.waitForChanges();
-            menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(2);
-            expect(menuOptions[0]).toEqualText("Filter");
-            expect(menuOptions[1]).toEqualText("Flat white");
-        });
-        it("should filter options when search match position is set to start", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("search-match-position", "start");
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("c");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0]).toEqualText("Cappuccino");
-        });
-        it("should include option descriptions in search", async () => {
-            const page = await newE2EPage();
-            const optionsWithDescription = `[
-        { label: "Cappuccino", value: "Cap" },
-        { label: "Latte", value: "Lat", description: "A milkier coffee than a cappuccino" },
-        { label: "Americano", value: "Ame" },
-        { label: "Filter", value: "Fil" },
-        { label: "Flat white", value: "Fla" },
-        { label: "Mocha", value: "Moc" },
-        { label: "Macchiato", value: "Mac" },
-      ]`;
-            await page.setContent(getTestSearchableSelect(optionsWithDescription));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("include-descriptions-in-search", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("m");
-            await page.waitForChanges();
-            await select.press("i");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0].textContent.substring(0, 5)).toEqualText("Latte");
-        });
-        it("should not include group titles in search", async () => {
-            const page = await newE2EPage();
-            const groupedOptions = `[
-        {
-          label: "Fancy",
-          children: [
-            { label: "Cappuccino", value: "Cap" },
-            { label: "Flat white", value: "Flat" },
-          ],
-        },
-        {
-          label: "Boring",
-          children: [
-            { label: "Filter", value: "Fil" },
-            { label: "Latte", value: "Lat" },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSearchableSelect(groupedOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("b");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(1);
-            expect(menuOptions[0]).toEqualText("No results found");
-        });
-        it("should display whole group when group titles included in search", async () => {
-            const page = await newE2EPage();
-            const groupedOptions = `[
-        {
-          label: "Fancy",
-          children: [
-            { label: "Cappuccino", value: "Cap" },
-            { label: "Flat white", value: "Flat" },
-          ],
-        },
-        {
-          label: "Boring",
-          children: [
-            { label: "Filter", value: "Fil" },
-            { label: "Latte", value: "Lat" },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSearchableSelect(groupedOptions));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("include-group-titles-in-search", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("b");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(2);
-            expect(menuOptions[0]).toEqualText("Filter");
-            expect(menuOptions[1]).toEqualText("Latte");
-        });
-        it("should display a clear button which clears the input when clicked", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            let clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-            expect(clearButton).toBeNull();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("a");
-            await page.waitForChanges();
-            clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-            expect(clearButton).not.toBeNull();
-            await clearButton.click();
-            expect(select.textContent).toBe("");
-            expect(icChange).toHaveReceivedEventDetail({
-                value: null,
-            });
-        });
-        it("should emit the value as null when the input is changed after selecting an option", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "Cap",
-            });
-            const clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-            await clearButton.click();
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: null,
-            });
-        });
-        it("should still filter the options when the input is changed after selecting an option", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await select.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "Cap",
-            });
-            for (let i = 0; i <= 7; i++) {
-                select.press("Backspace");
-                await page.waitForChanges();
-            }
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuOptions = await menu.findAll("li");
-            expect(menuOptions).toHaveLength(2);
-            expect(menuOptions[0]).toEqualText("Cappuccino");
-            expect(menuOptions[1]).toEqualText("Americano");
-        });
-        it("should close menu on blur", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.click();
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await select.press("Tab");
-            expect(await getMenuVisibility(page)).toBe("hidden");
-        });
-        it("should emit icChange on delay", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<ic-select-with-multi label="IC Select Test" debounce="500" searchable></ic-select-with-multi>`);
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            await focusAndTypeIntoInput("foo", page);
-            await page.waitForTimeout(600);
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "foo",
-            });
-            await focusAndTypeIntoInput("bar", page);
-            await page.waitForChanges();
-            await page.waitForTimeout(100);
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "foo",
-            });
-            await page.waitForTimeout(500);
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "foobar",
-            });
-        });
-        it("should update hidden input to value typed in select searchable input", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("bar", page);
-            await page.waitForChanges();
-            const hiddenInput = await page.find("input[type='hidden']");
-            expect(hiddenInput.getAttribute("value")).toBe("bar");
-        });
-        it("should keep typed in hidden input value when highlighting menu options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("cap", page);
-            await page.waitForChanges();
-            let hiddenInput = await page.find("input[type='hidden']");
-            expect(hiddenInput.getAttribute("value")).toBe("cap");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const menuListItems = await page.findAll("ic-select-with-multi >>> ic-menu-with-multi > ul > li");
-            expect(menuListItems[0]).toHaveClass("focused-option");
-            hiddenInput = await page.find("input[type='hidden']");
-            expect(hiddenInput.getAttribute("value")).toBe("cap");
-        });
-        it("should update hidden value from typed to selected", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("o", page);
-            await page.waitForChanges();
-            const hiddenInput = await page.find("input[type='hidden']");
-            expect(hiddenInput.getAttribute("value")).toBe("o");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const menuListItems = await page.findAll("ic-select-with-multi >>> ic-menu-with-multi > ul > li");
-            expect(menuListItems[0]).toHaveClass("focused-option");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(hiddenInput.getAttribute("value")).toBe("Cap");
-        });
-        it("should update hidden value from typed to selected to typed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("o", page);
-            await page.waitForChanges();
-            const hiddenInput = await page.find("input[type='hidden']");
-            expect(hiddenInput.getAttribute("value")).toBe("o");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const menuListItems = await page.findAll("ic-select-with-multi >>> ic-menu-with-multi > ul > li");
-            expect(menuListItems[0]).toHaveClass("focused-option");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(hiddenInput.getAttribute("value")).toBe("Cap");
-            await page.keyboard.press("1");
-            await page.waitForChanges();
-            expect(hiddenInput.getAttribute("value")).toBe("Cappuccino1");
-        });
-        it("should update the value of the input and options when passing the value directly", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi");
-            select.setAttribute("value", "foo");
-            await page.waitForChanges();
-            const selectInput = await page.find('ic-select-with-multi >>> input[role="combobox"]');
-            expect(await selectInput.getProperty("value")).toBe("foo");
-        });
-        it("should trigger icChange on input for each typed value", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi");
-            const icChange = await select.spyOnEvent("icChange");
-            await focusAndTypeIntoInput("f", page);
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "f",
-            });
-            await focusAndTypeIntoInput("o", page);
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "fo",
-            });
-            await focusAndTypeIntoInput("o", page);
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "foo",
-            });
-        });
-        it("should not trigger icChange on highlighting menu items", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi");
-            const icChange = await select.spyOnEvent("icChange");
-            await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                input.focus();
-            });
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            expect(icChange).not.toHaveReceivedEvent();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            expect(icChange).not.toHaveReceivedEvent();
-        });
-        it("should not select a menu option when typing into the searchable input field", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Cap", page);
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            expect(await getMenuVisibility(page)).toBe("visible");
-            const firstOption = await menu.findAll("li");
-            expect(firstOption[0]).not.toHaveClass("aria-selected");
-        });
-        it("should not select a menu option when one has previously been set and backspace is pressed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Lat", page);
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            const inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Latte");
-            await page.keyboard.press("Backspace");
-            await page.waitForChanges();
-            await page.keyboard.press("Backspace");
-            await page.waitForChanges();
-            const options = await menu.findAll("li");
-            options.forEach((option) => {
-                expect(option).not.toHaveClass("aria-selected");
-            });
-        });
-        it("should display selected option when selecting a menu option and then opening and closing the menu", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(searchableOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Lat", page);
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            const inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Latte");
-            await page.evaluate(() => {
-                const button = document.querySelector("button");
-                button.focus();
-            });
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("hidden");
-            const select = await page.find("ic-select-with-multi");
-            await select.click();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const latteOption = await menu.find("li[data-value='Lat']");
-            expect(latteOption).toHaveAttribute("aria-selected");
-        });
-        it("hidden input value when on initial load with default value", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelectSearchableFormReset(options));
-            await page.waitForChanges();
-            const hiddenInput = await page.find("ic-select-with-multi > [name*='ic-select-input-0']");
-            expect(hiddenInput.getAttribute("value")).toBe("Test value 1");
-        });
-        it("should submit hidden input value when updating value, pressing reset to initial value and then submitting", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelectSearchableFormReset(options));
-            await page.waitForChanges();
-            const hiddenInput = await page.find("ic-select-with-multi > [name*='ic-select-input-0']");
-            expect(hiddenInput.getAttribute("value")).toBe("Test value 1");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Backspace");
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(hiddenInput.getAttribute("value")).toBe("Test value 2");
-            await page.$eval("#resetButton", (el) => {
-                const reset = el;
-                reset.click();
-            });
-            await page.waitForChanges();
-            expect(hiddenInput.getAttribute("value")).toBe("Test value 1");
-        });
-        it("should scroll menu", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(largeOptions));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Test", page);
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            let menuScrollTop = await page.$eval("ic-select-with-multi", (el) => {
-                const menu = el.shadowRoot.querySelector("ic-menu-with-multi ul");
-                return menu.scrollTop;
-            });
-            expect(menuScrollTop).toBe(0);
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            const inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Test label 1");
-            await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                input.focus();
-            });
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowUp");
-            await page.waitForChanges();
-            menuScrollTop = await page.$eval("ic-select-with-multi", (el) => {
-                const menu = el.shadowRoot.querySelector("ic-menu-with-multi ul");
-                return menu.scrollTop;
-            });
-            expect(menuScrollTop).not.toBe(0);
-        });
-        it("should only highlight and select enabled options in searchable with arrowDown", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(optionsWithDisabled));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Test", page);
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuItems = await menu.findAll("li");
-            expect(menuItems[0]).not.toHaveClass("focused-option");
-            expect(menuItems[1]).toHaveClass("focused-option");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            let inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Test label 2");
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Test label 5");
-        });
-        it("should only highlight and select enabled options in searchable with arrowUp", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSearchableSelect(optionsWithDisabled));
-            await page.waitForChanges();
-            await focusAndTypeIntoInput("Test", page);
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("ArrowUp");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const menuItems = await menu.findAll("li");
-            expect(menuItems[menuItems.length - 1]).toHaveClass("focused-option");
-            expect(menuItems[menuItems.length - 2]).not.toHaveClass("focused-option");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            let inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Test label 5");
-            await page.keyboard.press("ArrowUp");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowUp");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            inputValue = await page.$eval("ic-select-with-multi", (el) => {
-                const input = el.shadowRoot.querySelector("input");
-                return input.value;
-            });
-            expect(inputValue).toBe("Test label 2");
-        });
-        describe("loading", () => {
-            it("should retry loading and keep the menu open when retry button is pressed with Spacebar", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" searchable="true" options="[]" loading="true" timeout="500"></ic-select-with-multi>`);
-                await page.waitForChanges();
-                const icRetryLoad = await page.spyOnEvent("icRetryLoad");
-                await page.waitForTimeout(560);
-                const firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li ic-typography");
-                expect(firstOption).toEqualText("Loading Error");
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                const retryButton = await page.find("ic-select-with-multi >>> #retry-button");
-                await retryButton.press(" ");
-                await page.waitForChanges();
-                expect(icRetryLoad).toHaveReceivedEvent;
-                expect(await getMenuVisibility(page)).toBe("visible");
-            });
-            it("should cancel loading if the clear button is pressed mid-load", async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<ic-select-with-multi label="IC Select Test" searchable="true" timeout="500"></ic-select-with-multi>
-        <script>
-          var select = document.querySelector("ic-select-with-multi");
-          select.options = [];
-          select.addEventListener("icChange", function() {
-            select.loading = "true";
-          });
-        </script>`);
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.press("c");
-                await page.waitForChanges();
-                let firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toEqualText("Loading...");
-                const clearButton = await page.find("ic-select-with-multi >>> .clear-button");
-                await clearButton.click();
-                await page.waitForChanges();
-                await page.waitForTimeout(560);
-                firstOption = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu li");
-                expect(firstOption).toBeNull;
-            });
-            it("should render a No results message if no options are provided on render", async () => {
-                const page = await newE2EPage();
-                await page.setContent(getTestSearchableSelect(`[]`));
-                await page.waitForChanges();
-                const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-                await select.click();
-                await page.waitForChanges();
-                const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-                const menuOptions = await menu.findAll("li");
-                expect(menuOptions).toHaveLength(1);
-                expect(menuOptions[0]).toEqualText("No results found");
-            });
-        });
-    });
-    it("should reset to initial value on form reset", async () => {
-        const page = await newE2EPage();
-        await page.setContent(getTestSelectFormReset(options));
-        await page.waitForChanges();
-        let value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe(undefined);
-        const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-        await select.press("Enter");
-        await page.waitForChanges();
-        await select.press("ArrowDown");
-        await page.waitForChanges();
-        value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe("Test value 1");
-        await page.$eval("#resetButton", (el) => {
-            const reset = el;
-            reset.click();
-        });
-        await page.waitForChanges();
-        value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe(undefined);
-    });
-    it("menu should not be visible on initial load if setting default value and disable filter is set", async () => {
-        const page = await newE2EPage();
-        await page.setContent(getTestSearchableSelectAsync());
-        await page.waitForChanges();
-        await page.waitForTimeout(900);
-        expect(await getMenuVisibility(page)).toBe("hidden");
-    });
-    it("should reset to initial value on form reset with searchable", async () => {
-        const page = await newE2EPage();
-        await page.setContent(getTestSelectSearchableFormReset(options));
-        await page.waitForChanges();
-        let value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe("Test value 1");
-        const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-        await select.press("ArrowDown");
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe("Test value 2");
-        await page.$eval("#resetButton", (el) => {
-            const reset = el;
-            reset.click();
-        });
-        await page.waitForChanges();
-        value = await page.$eval("ic-select-with-multi", (el) => {
-            const select = el;
-            return select.value;
-        });
-        expect(value).toBe("Test value 1");
-    });
-    let page;
-    describe("native", () => {
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1");
-            await page.setViewport({
-                width: 375,
-                height: 667,
-                isMobile: true,
-                hasTouch: true,
-            });
-        });
-        it("should render", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).not.toBeNull();
-        });
-        it("should render a native select when searchable is applied on mobile", async () => {
-            await page.setContent(getTestSearchableSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).not.toBeNull();
-        });
-        it("should render when no options are provided", async () => {
-            await page.setContent(`<ic-select-with-multi label="IC Select Test"></ic-select-with-multi>`);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).not.toBeNull();
-        });
-        it("should disable options correctly", async () => {
-            await page.setContent(getTestSelect(optionsWithDisabled));
-            await page.waitForChanges();
-            const optionsDisabled = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("option"), (option) => option.disabled));
-            expect(optionsDisabled[1]).toBe(true);
-        });
-        it("should render options as <optgroup>s if they have children", async () => {
-            const groupedOptions = `[
-        {
-          label: 'Test group',
-          children: [
-            { label: 'Test label 1', value: 'Test value 1' },
-            { label: 'Test label 2', value: 'Test value 2' },
-            { label: 'Test label 3', value: 'Test value 3' },
-          ],
-        },
-      ]`;
-            await page.setContent(getTestSelect(groupedOptions));
-            await page.waitForChanges();
-            const optGroup = await page.evaluate(() => document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelector("optgroup"));
-            expect(optGroup).toBeTruthy();
-        });
-        it("should render a required <select> when required", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("required", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).toHaveAttribute("required");
-        });
-        it("should not render a label when the 'hide-label' prop is supplied", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("hide-label", true);
-            await page.waitForChanges();
-            const label = await page.find("ic-select-with-multi >>> ic-input-label");
-            expect(label).toBeNull();
-        });
-        it("should render a disabled <select> when the 'disabled' prop is supplied", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("disabled", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).toHaveAttribute("disabled");
-        });
-        it("should render the selected value as text instead of rendering a <select> when read-only", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("value", "Test value 1");
-            icSelect.setAttribute("readonly", true);
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            const typography = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("ic-typography"), (typography) => typography.innerText));
-            expect(select).toBe(null);
-            expect(typography[1]).toBe("Test label 1");
-        });
-        it("should render the correct placeholder", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("placeholder", "Test placeholder");
-            await page.waitForChanges();
-            const optionLabels = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("option"), (option) => option.innerText));
-            expect(optionLabels[0]).toEqual("Test placeholder");
-        });
-        it("should set aria-invalid if validation status is 'error'", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("validation-status", "error");
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            expect(select).toHaveAttribute("aria-invalid");
-        });
-        it("should display the value passed in using the 'value' prop as the selected option", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("value", "Test value 1");
-            await page.waitForChanges();
-            const optionsSelected = await page.evaluate(() => Array.from(document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelectorAll("option"), (option) => option.selected));
-            expect(optionsSelected[1]).toBe(true);
-        });
-        it("should set the correct name on the hidden input", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("name", "Test name");
-            await page.waitForChanges();
-            const hiddenInput = await page.find("input");
-            const hiddenInputName = await hiddenInput.getProperty("name");
-            expect(hiddenInputName).toEqual("Test name");
-        });
-        it("should call icChange when the selected option is changed", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> select");
-            await select.press("ArrowDown");
-            await select.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: "Test value 1",
-            });
-        });
-        it("should call icFocus when focused", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const icFocus = await page.spyOnEvent("icFocus");
-            await page.keyboard.down("Tab");
-            await page.waitForChanges();
-            expect(icFocus).toHaveReceivedEvent();
-        });
-        it("should call icBlur when it loses focus", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const icBlur = await page.spyOnEvent("icBlur");
-            await page.keyboard.down("Tab");
-            await page.keyboard.down("Tab");
-            await page.waitForChanges();
-            expect(icBlur).toHaveReceivedEvent();
-        });
-        it("should set the 'placeholder' class name if no option is selected", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const selectClassName = await page.evaluate(() => document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelector("select").className);
-            expect(selectClassName).toBe("placeholder");
-        });
-        it("should set the text colour to the primary text colour if an option is selected", async () => {
-            await page.setContent(getTestSelect(options));
-            const icSelect = await page.find("ic-select-with-multi");
-            icSelect.setAttribute("value", "Test value 1");
-            await page.waitForChanges();
-            const selectClassName = await page.evaluate(() => document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelector("select").className);
-            expect(selectClassName).toBe("select-option-selected");
-        });
-        it("should change the text colour to the primary text colour when an option is selected", async () => {
-            await page.setContent(getTestSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> select");
-            await select.press("ArrowDown");
-            await select.press("Enter");
-            await page.waitForChanges();
-            const selectClassName = await page.evaluate(() => document
-                .querySelector("ic-select-with-multi")
-                .shadowRoot.querySelector("select").className);
-            expect(selectClassName).toBe("select-option-selected");
-        });
-        it("should add .menu-scroll to menu components when options height is over 320", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelect(largeOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> button.select-input");
-            await select.click();
-            await page.waitForChanges();
-            const menuClasses = await page.evaluate(() => {
-                const menu = document
-                    .querySelector("ic-select-with-multi")
-                    .shadowRoot.querySelector("ic-menu-with-multi .menu");
-                return menu.classList;
-            });
-            expect(Object.values(menuClasses).includes("menu-scroll")).toBeTruthy();
-        });
-        it("should add .menu-scroll to menu components when options are initially set and then populated with large data set", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestSelectAsync(options, largeOptions));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> button.select-input");
-            await select.click();
-            await page.waitForChanges();
-            let menuClasses = await page.evaluate(() => {
-                const menu = document
-                    .querySelector("ic-select-with-multi")
-                    .shadowRoot.querySelector("ic-menu-with-multi .menu");
-                return menu.classList;
-            });
-            expect(Object.values(menuClasses).includes("menu-scroll")).toBeFalsy();
-            await page.waitForTimeout(1200);
-            menuClasses = await page.evaluate(() => {
-                const menu = document
-                    .querySelector("ic-select-with-multi")
-                    .shadowRoot.querySelector("ic-menu-with-multi .menu");
-                return menu.classList;
-            });
-            expect(Object.values(menuClasses).includes("menu-scroll")).toBeTruthy();
-        });
-    });
-    describe("multi", () => {
-        it("should emit icChange and icOptionSelect when an option is selected", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const icOptionSelect = await page.spyOnEvent("icOptionSelect");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 1"],
-            });
-            expect(icOptionSelect).toHaveReceivedEventDetail({
-                value: "Test value 1",
-            });
-        });
-        it("should deselect an option correctly - emit icChange and icOptionDeselect, and remove check icon and aria-selected", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const icOptionDeselect = await page.spyOnEvent("icOptionDeselect");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            const optionEls = await menu.findAll("li");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(optionEls[0].getAttribute("aria-selected")).toBeTruthy;
-            expect(await optionEls[0].find(".check-icon")).not.toBeNull;
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: null,
-            });
-            expect(icOptionDeselect).toHaveReceivedEventDetail({
-                value: "Test value 1",
-            });
-            expect(optionEls[0].getAttribute("aria-selected")).toBeFalsy;
-            expect(await optionEls[0].find(".check-icon")).toBeNull;
-        });
-        it("should move focus from menu to 'Select all' button and back again", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Enter");
-            await page.waitForChanges();
-            let activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0-menu");
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            const activeElClass = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.className);
-            expect(activeElClass).toContain("select-all-button");
-            await page.keyboard.down("Shift");
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.up("Shift");
-            await page.waitForChanges();
-            activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0-menu");
-        });
-        it("should move focus from option (i.e. when option is highlighted) to 'Select all' button", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const activeElId = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.id);
-            expect(activeElId).toBe("ic-select-input-0-menu-Test value 1");
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            const activeElClass = await page.$eval("ic-select-with-multi", (el) => el.shadowRoot.activeElement.className);
-            expect(activeElClass).toContain("select-all-button");
-        });
-        it("should emit icChange when the 'Select all' button is pressed, and emit icOptionSelect only for unselected options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 1"],
-            });
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            const icOptionSelect = await page.spyOnEvent("icOptionSelect");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 1", "Test value 2", "Test value 3"],
-            });
-            expect(icOptionSelect).toHaveReceivedEventTimes(2);
-        });
-        it("should emit icChange when the 'Clear all' button is pressed, and emit icOptionDeselect for all options", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const icOptionDeselect = await page.spyOnEvent("icOptionDeselect");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.keyboard.press("ArrowDown");
-            await page.keyboard.press("Enter");
-            await page.keyboard.press("ArrowDown");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: null,
-            });
-            expect(icOptionDeselect).toHaveReceivedEventTimes(3);
-        });
-        it("should close menu when user tabs off 'Select all' button", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("visible");
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            expect(await getMenuVisibility(page)).toBe("hidden");
-        });
-        it("should select and clear all options on Ctrl+A", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.down("Control");
-            await page.keyboard.press("KeyA");
-            await page.waitForChanges();
-            await page.keyboard.up("Control");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 1", "Test value 2", "Test value 3"],
-            });
-            await page.keyboard.down("Control");
-            await page.keyboard.press("KeyA");
-            await page.waitForChanges();
-            await page.keyboard.up("Control");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: null,
-            });
-        });
-        it("should not select disabled options when the 'Select all' button is pressed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(optionsWithDisabled));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 2", "Test value 5"],
-            });
-        });
-        it("should select all grouped options correctly", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(optionsWithGroups));
-            await page.waitForChanges();
-            const icChange = await page.spyOnEvent("icChange");
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(icChange).toHaveReceivedEventDetail({
-                value: ["Test value 1", "Test value 2", "Test value 3"],
-            });
-        });
-        it("should not reset focus back to the top of the menu when changing from clicking to using the keyboard", async () => {
-            const page = await newE2EPage();
-            await page.setContent(getTestMultiSelect(options));
-            await page.waitForChanges();
-            const select = await page.find("ic-select-with-multi >>> #ic-select-input-0");
-            await select.press("ArrowDown");
-            await page.waitForChanges();
-            const menu = await page.find("ic-select-with-multi >>> #ic-select-input-0-menu");
-            await menu.click();
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            const optionEls = await menu.findAll("li");
-            expect(optionEls[0]).not.toHaveClass("focused-option");
-            expect(optionEls[1]).toHaveClass("focused-option");
-        });
-    });
-});
-//# sourceMappingURL=ic-select.e2e.js.map