@ukic/canary-web-components 2.0.0-canary.7 → 2.0.0-canary.9

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

@@ -0,0 +1,2040 @@
+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 selet 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