@ukic/web-components 2.7.0 → 2.9.0

package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js

@@ -1,71 +1,71 @@
 import { newE2EPage } from "@stencil/core/testing";
 beforeAll(() => {
-  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
 });
 describe("ic-search-bar", () => {
-  const options = [
-    { label: "foo", value: "foo" },
-    { label: "bar", value: "bar" },
-    { label: "baz", value: "qux" },
-  ];
-  const longOptions = [
-    { label: "item 1", value: "item-1" },
-    { label: "item 2", value: "item-2" },
-    { label: "item 3", value: "item-3" },
-    { label: "item 4", value: "item-4" },
-    { label: "item 5", value: "item-5" },
-  ];
-  const focusAndTypeIntoInput = async (value, page) => {
-    await page.$eval("ic-search-bar", (el) => {
-      const textfield = el.shadowRoot.querySelector("ic-text-field");
-      const input = textfield.shadowRoot.querySelector("#ic-search-bar-input-0");
-      input.focus();
+    const options = [
+        { label: "foo", value: "foo" },
+        { label: "bar", value: "bar" },
+        { label: "baz", value: "qux" },
+    ];
+    const longOptions = [
+        { label: "item 1", value: "item-1" },
+        { label: "item 2", value: "item-2" },
+        { label: "item 3", value: "item-3" },
+        { label: "item 4", value: "item-4" },
+        { label: "item 5", value: "item-5" },
+    ];
+    const focusAndTypeIntoInput = async (value, page) => {
+        await page.$eval("ic-search-bar", (el) => {
+            const textfield = el.shadowRoot.querySelector("ic-text-field");
+            const input = textfield.shadowRoot.querySelector("#ic-search-bar-input-0");
+            input.focus();
+        });
+        value.split("").forEach(async (char) => {
+            await page.keyboard.press(char);
+        });
+    };
+    it("renders clear button when value present", async () => {
+        const page = await newE2EPage();
+        await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
+        await page.waitForChanges();
+        let clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
+        expect(await clearButton.isVisible()).toBeFalsy();
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
+        expect(await clearButton.isVisible()).toBeTruthy();
     });
-    value.split("").forEach(async (char) => {
-      await page.keyboard.press(char);
+    it("should clear value when clear button pressed", async () => {
+        const page = await newE2EPage();
+        await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
+        const searchBar = await page.find("ic-search-bar");
+        const icClear = await page.spyOnEvent("icClear");
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
+        await clearButton.click();
+        await page.waitForChanges();
+        const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.querySelector("ic-text-field").shadowRoot.activeElement.id);
+        expect(await searchBar.getProperty("value")).toBe("");
+        expect(activeElId).toBe("ic-search-bar-input-0");
+        expect(icClear).toHaveReceivedEvent;
     });
-  };
-  it("renders clear button when value present", async () => {
-    const page = await newE2EPage();
-    await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
-    await page.waitForChanges();
-    let clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-    expect(await clearButton.isVisible()).toBeFalsy();
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-    expect(await clearButton.isVisible()).toBeTruthy();
-  });
-  it("should clear value when clear button pressed", async () => {
-    const page = await newE2EPage();
-    await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
-    const searchBar = await page.find("ic-search-bar");
-    const icClear = await page.spyOnEvent("icClear");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-    await clearButton.click();
-    await page.waitForChanges();
-    const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.querySelector("ic-text-field").shadowRoot.activeElement.id);
-    expect(await searchBar.getProperty("value")).toBe("");
-    expect(activeElId).toBe("ic-search-bar-input-0");
-    expect(icClear).toHaveReceivedEvent;
-  });
-  it("should emit icSubmitSearch when submit is clicked", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("foo", page);
-    const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-    const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-    await searchSubmitButton.click();
-    expect(icSubmitSearch).toHaveReceivedEventDetail({
-      value: "foo",
+    it("should emit icSubmitSearch when submit is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("foo", page);
+        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
+        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
+        await searchSubmitButton.click();
+        expect(icSubmitSearch).toHaveReceivedEventDetail({
+            value: "foo",
+        });
     });
-  });
-  it("should invoke submit event when search textfield is in a form", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should invoke submit event when search textfield is in a form", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <form>
         <ic-search-bar label="Test Label" name="search01"></ic-search-bar>
       </form>
@@ -77,388 +77,388 @@ describe("ic-search-bar", () => {
         })
       </script>
     `);
-    const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-    await searchSubmitButton.click();
-    await page.waitForChanges();
-    expect(icSubmitSearch).toHaveReceivedEventDetail({
-      value: "foo",
+        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
+        await searchSubmitButton.click();
+        await page.waitForChanges();
+        expect(icSubmitSearch).toHaveReceivedEventDetail({
+            value: "foo",
+        });
+        const p = await page.find("#text");
+        expect(p.innerText).toBe("submitted");
     });
-    const p = await page.find("#text");
-    expect(p.innerText).toBe("submitted");
-  });
-  it("should render options", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should render options", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await page.waitForChanges();
-    await page.waitForTimeout(500);
-    const menuItems = menu.findAll("li");
-    expect((await menuItems).length).toBe(2);
-    expect(await menu.isVisible()).toBeTruthy();
-  });
-  it("should begin with no aria-owns attribute and then add one when the menu appears", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await page.waitForChanges();
+        await page.waitForTimeout(500);
+        const menuItems = menu.findAll("li");
+        expect((await menuItems).length).toBe(2);
+        expect(await menu.isVisible()).toBeTruthy();
+    });
+    it("should begin with no aria-owns attribute and then add one when the menu appears", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    let textField = await page.find("ic-search-bar >>> ic-text-field");
-    let menu = await textField.find("ic-menu");
-    expect(textField).not.toHaveAttribute("aria-owns");
-    expect(menu).toBeNull();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    textField = await page.find("ic-search-bar >>> ic-text-field");
-    menu = await textField.find("ic-menu");
-    expect(textField).toHaveAttribute("aria-owns");
-    expect(menu).not.toBeNull();
-  });
-  it("should focus on input when menu is initially displayed", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        let textField = await page.find("ic-search-bar >>> ic-text-field");
+        let menu = await textField.find("ic-menu");
+        expect(textField).not.toHaveAttribute("aria-owns");
+        expect(menu).toBeNull();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        textField = await page.find("ic-search-bar >>> ic-text-field");
+        menu = await textField.find("ic-menu");
+        expect(textField).toHaveAttribute("aria-owns");
+        expect(menu).not.toBeNull();
+    });
+    it("should focus on input when menu is initially displayed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.waitForTimeout(500);
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    const activeElId = await page.$eval("ic-search-bar", (el) => {
-      const textfield = el.shadowRoot.querySelector("ic-text-field");
-      return textfield.shadowRoot.activeElement.id;
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.waitForTimeout(500);
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        const activeElId = await page.$eval("ic-search-bar", (el) => {
+            const textfield = el.shadowRoot.querySelector("ic-text-field");
+            return textfield.shadowRoot.activeElement.id;
+        });
+        expect(await menu.isVisible()).toBeTruthy();
+        expect(activeElId).toBe("ic-search-bar-input-0");
     });
-    expect(await menu.isVisible()).toBeTruthy();
-    expect(activeElId).toBe("ic-search-bar-input-0");
-  });
-  it("should remove menu when input value is cleared", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should remove menu when input value is cleared", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForTimeout(500);
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(await menu.isVisible()).toBeTruthy();
-    const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-    await clearButton.click();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull();
-  });
-  it("should not update value when options are highlighted", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForTimeout(500);
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(await menu.isVisible()).toBeTruthy();
+        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
+        await clearButton.click();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull();
+    });
+    it("should not update value when options are highlighted", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await searchBar.press("ArrowDown");
-    await page.waitForChanges();
-    expect(await searchBar.getProperty("value")).toBe("ba");
-  });
-  it("should focus on menu on ArrowDown from input", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await searchBar.press("ArrowDown");
+        await page.waitForChanges();
+        expect(await searchBar.getProperty("value")).toBe("ba");
+    });
+    it("should focus on menu on ArrowDown from input", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await searchBar.press("ArrowDown");
-    await page.waitForChanges();
-    const activeElId = await page.$eval("ic-search-bar", (el) => {
-      return el.shadowRoot.activeElement.id;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await searchBar.press("ArrowDown");
+        await page.waitForChanges();
+        const activeElId = await page.$eval("ic-search-bar", (el) => {
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
     });
-    expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-  });
-  it("should focus on menu on ArrowUp from input", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should focus on menu on ArrowUp from input", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await searchBar.press("ArrowUp");
-    await page.waitForChanges();
-    const activeElId = await page.$eval("ic-search-bar", (el) => {
-      return el.shadowRoot.activeElement.id;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await searchBar.press("ArrowUp");
+        await page.waitForChanges();
+        const activeElId = await page.$eval("ic-search-bar", (el) => {
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
     });
-    expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-  });
-  it("should highlight first and last options using Home and End and move focus to menu", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should highlight first and last options using Home and End and move focus to menu", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("End");
-    await page.waitForChanges();
-    let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).not.toHaveClass("focused-option");
-    expect(menuOptions[1]).toHaveClass("focused-option");
-    let activeElId = await page.$eval("ic-search-bar", (el) => {
-      return el.shadowRoot.activeElement.id;
-    });
-    expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-    await page.keyboard.press("Home");
-    await page.waitForChanges();
-    menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).toHaveClass("focused-option");
-    expect(menuOptions[1]).not.toHaveClass("focused-option");
-    activeElId = await page.$eval("ic-search-bar", (el) => {
-      return el.shadowRoot.activeElement.id;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).not.toHaveClass("focused-option");
+        expect(menuOptions[1]).toHaveClass("focused-option");
+        let activeElId = await page.$eval("ic-search-bar", (el) => {
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).toHaveClass("focused-option");
+        expect(menuOptions[1]).not.toHaveClass("focused-option");
+        activeElId = await page.$eval("ic-search-bar", (el) => {
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(activeElId).toBe("ic-search-bar-input-0-menu-bar");
     });
-    expect(activeElId).toBe("ic-search-bar-input-0-menu-bar");
-  });
-  it("should select first option and update value as label on Enter", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should select first option and update value as label on Enter", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Enter");
-    expect(await searchBar.getProperty("value")).toBe("bar");
-  });
-  it("should keep the input value on Enter when searchMode is set to `query`", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Enter");
+        expect(await searchBar.getProperty("value")).toBe("bar");
+    });
+    it("should keep the input value on Enter when searchMode is set to `query`", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Enter");
-    expect(await searchBar.getProperty("value")).toBe("ba");
-  });
-  it("should not highlight options when typing and searchMode is `query`", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Enter");
+        expect(await searchBar.getProperty("value")).toBe("ba");
+    });
+    it("should not highlight options when typing and searchMode is `query`", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("bar", page);
-    await page.waitForChanges();
-    const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).not.toHaveClass("focused-option");
-  });
-  it("should move focus to first option after one ArrowDown press when searchMode is set to `query`", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("bar", page);
+        await page.waitForChanges();
+        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).not.toHaveClass("focused-option");
+    });
+    it("should move focus to first option after one ArrowDown press when searchMode is set to `query`", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).toHaveClass("focused-option");
-  });
-  it("should add a space to value on Space", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).toHaveClass("focused-option");
+    });
+    it("should add a space to value on Space", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Space");
-    expect(await searchBar.getProperty("value")).toBe("ba ");
-  });
-  it("should remove a character from value on Backspace", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Space");
+        expect(await searchBar.getProperty("value")).toBe("ba ");
+    });
+    it("should remove a character from value on Backspace", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Backspace");
-    expect(await searchBar.getProperty("value")).toBe("b");
-  });
-  it("should set value to last option when pressing up on input", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Backspace");
+        expect(await searchBar.getProperty("value")).toBe("b");
+    });
+    it("should set value to last option when pressing up on input", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await searchBar.press("ArrowUp");
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Enter");
-    expect(await searchBar.getProperty("value")).toBe("qux");
-  });
-  it("menu should close on Escape", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await searchBar.press("ArrowUp");
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Enter");
+        expect(await searchBar.getProperty("value")).toBe("qux");
+    });
+    it("menu should close on Escape", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowUp");
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(await menu.isVisible()).toBeTruthy();
-    await menu.press("Escape");
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull();
-  });
-  it("menu should close when blurred and open when focused", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(await menu.isVisible()).toBeTruthy();
+        await menu.press("Escape");
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull();
+    });
+    it("menu should close when blurred and open when focused", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    await page.waitForChanges();
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    // Will focus clear button then blur
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull;
-    await page.keyboard.down("Shift");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(await menu.isVisible()).toBeTruthy();
-  });
-  it("should emit icOptionSelect when a menu option has been selected", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        await page.waitForChanges();
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        // Will focus clear button then blur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull;
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(await menu.isVisible()).toBeTruthy();
+    });
+    it("should emit icOptionSelect when a menu option has been selected", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar search label="Test Label"></ic-search-bar>
     `);
-    const icOptionSelect = await page.spyOnEvent("icOptionSelect");
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("fo", page);
-    await page.waitForChanges();
-    await searchBar.press("ArrowDown");
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await menu.press("Enter");
-    expect(icOptionSelect).toHaveReceivedEventDetail({
-      value: "foo",
+        const icOptionSelect = await page.spyOnEvent("icOptionSelect");
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("fo", page);
+        await page.waitForChanges();
+        await searchBar.press("ArrowDown");
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await menu.press("Enter");
+        expect(icOptionSelect).toHaveReceivedEventDetail({
+            value: "foo",
+        });
     });
-  });
-  it("should emit icMenuChange when opening/closing menu", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should emit icMenuChange when opening/closing menu", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const icMenuChange = await page.spyOnEvent("icMenuChange");
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    expect(icMenuChange).toHaveReceivedEventDetail({
-      open: true,
-    });
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    expect(icMenuChange).toHaveReceivedEventDetail({
-      open: false,
+        const icMenuChange = await page.spyOnEvent("icMenuChange");
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        expect(icMenuChange).toHaveReceivedEventDetail({
+            open: true,
+        });
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(icMenuChange).toHaveReceivedEventDetail({
+            open: false,
+        });
     });
-  });
-  it("should prepopulate textfield with value in search mode", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should prepopulate textfield with value in search mode", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label" value="test value"></ic-search-bar>
     `);
-    const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
-    expect(await input.getProperty("value")).toBe("test value");
-  });
-  it("should filter options", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
+        expect(await input.getProperty("value")).toBe("test value");
+    });
+    it("should filter options", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    await page.waitForChanges();
-    let menuItems = menu.findAll("li");
-    expect((await menuItems).length).toBe(2);
-    await page.keyboard.press("r");
-    await page.waitForChanges();
-    menuItems = menu.findAll("li");
-    expect((await menuItems).length).toBe(1);
-  });
-  it("should prevent form submit event when clear is invoked using Enter", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        await page.waitForChanges();
+        let menuItems = menu.findAll("li");
+        expect((await menuItems).length).toBe(2);
+        await page.keyboard.press("r");
+        await page.waitForChanges();
+        menuItems = menu.findAll("li");
+        expect((await menuItems).length).toBe(1);
+    });
+    it("should prevent form submit event when clear is invoked using Enter", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <form>
         <ic-search-bar label="Test Label" name="search01"></ic-search-bar>
       </form>
@@ -469,654 +469,638 @@ describe("ic-search-bar", () => {
         })
       </script>
     `);
-    const icClear = await page.spyOnEvent("icClear");
-    const p = await page.find("#text");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Enter");
-    expect(icClear).toHaveReceivedEvent();
-    expect(p.innerText).toBe("idle");
-  });
-  it("should clear the value when clear is invoked using Space - should not add a whitespace", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const icClear = await page.spyOnEvent("icClear");
-    const searchBar = await page.find("ic-search-bar");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(icClear).toHaveReceivedEvent();
-    expect(searchBar.getAttribute("value")).toBe("");
-    expect(searchBar.getAttribute("value").length).toBe(0);
-  });
-  it("should emit icSubmitSearch when search button pressed with Space", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(icSubmitSearch).toHaveReceivedEventDetail({
-      value: "foo",
+        const icClear = await page.spyOnEvent("icClear");
+        const p = await page.find("#text");
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        expect(icClear).toHaveReceivedEvent();
+        expect(p.innerText).toBe("idle");
     });
-  });
-  it("should update value and move focus back to input when focus previously on ic-menu", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    const focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar").shadowRoot;
-      return el.activeElement.id;
+    it("should clear the value when clear is invoked using Space - should not add a whitespace", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const icClear = await page.spyOnEvent("icClear");
+        const searchBar = await page.find("ic-search-bar");
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(icClear).toHaveReceivedEvent();
+        expect(searchBar.getAttribute("value")).toBe("");
+        expect(searchBar.getAttribute("value").length).toBe(0);
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
-    await page.keyboard.press("r");
-    const inputEl = await page.evaluate(() => {
-      const el = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-text-field");
-      return {
-        focusedEl: el.shadowRoot.activeElement.id,
-        inputValue: el.value,
-      };
+    it("should emit icSubmitSearch when search button pressed with Space", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(icSubmitSearch).toHaveReceivedEventDetail({
+            value: "foo",
+        });
     });
-    expect(inputEl.focusedEl).toBe("ic-search-bar-input-0");
-    expect(inputEl.inputValue).toBe("bar");
-  });
-  it("should render suggestions after number of characters in value set to 3", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should update value and move focus back to input when focus previously on ic-menu", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    searchBar.setProperty("charactersUntilSuggestion", 3);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull();
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("r", page);
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(await menu.isVisible()).toBeTruthy();
-  });
-  it("should render no results available if no matches", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const focusedElement = await page.evaluate(() => {
+            const el = document.querySelector("ic-search-bar").shadowRoot;
+            return el.activeElement.id;
+        });
+        expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
+        await page.keyboard.press("r");
+        const inputEl = await page.evaluate(() => {
+            const el = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-text-field");
+            return {
+                focusedEl: el.shadowRoot.activeElement.id,
+                inputValue: el.value,
+            };
+        });
+        expect(inputEl.focusedEl).toBe("ic-search-bar-input-0");
+        expect(inputEl.inputValue).toBe("bar");
+    });
+    it("should render suggestions after number of characters in value set to 3", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("zzz", page);
-    await page.waitForChanges();
-    const noOptionsLabel = await page.evaluate(() => {
-      const menuEl = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-menu");
-      const noOptionsItem = menuEl.querySelectorAll("li")[0];
-      return noOptionsItem.innerText;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        searchBar.setProperty("charactersUntilSuggestion", 3);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull();
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("r", page);
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(await menu.isVisible()).toBeTruthy();
     });
-    expect(noOptionsLabel).toBe("No results found");
-  });
-  it("should render 0 results if no matches (updated no options text)", async () => {
-    const NO_OPTIONS = "0 results";
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should render no results available if no matches", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    searchBar.setProperty("emptyOptionListText", NO_OPTIONS);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("zzz", page);
-    await page.waitForChanges();
-    const noOptionsLabel = await page.evaluate(() => {
-      const menuEl = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-menu");
-      const noOptionsItem = menuEl.querySelectorAll("li")[0];
-      return noOptionsItem.innerText;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("zzz", page);
+        await page.waitForChanges();
+        const noOptionsLabel = await page.evaluate(() => {
+            const menuEl = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-menu");
+            const noOptionsItem = menuEl.querySelectorAll("li")[0];
+            return noOptionsItem.innerText;
+        });
+        expect(noOptionsLabel).toBe("No results found");
     });
-    expect(noOptionsLabel).toBe(NO_OPTIONS);
-  });
-  it("should disable search button on 0 results", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should render 0 results if no matches (updated no options text)", async () => {
+        const NO_OPTIONS = "0 results";
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("zzz", page);
-    await page.waitForChanges();
-    const searchSubmitBtn = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-    expect(await searchSubmitBtn.getProperty("disabled")).toBeTruthy();
-  });
-  it("should focus on first option when ic-menu rendered and Enter should select option", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        searchBar.setProperty("emptyOptionListText", NO_OPTIONS);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("zzz", page);
+        await page.waitForChanges();
+        const noOptionsLabel = await page.evaluate(() => {
+            const menuEl = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-menu");
+            const noOptionsItem = menuEl.querySelectorAll("li")[0];
+            return noOptionsItem.innerText;
+        });
+        expect(noOptionsLabel).toBe(NO_OPTIONS);
+    });
+    it("should disable search button on 0 results", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    const FirstOptionClassIsFocusedOption = await page.evaluate(() => {
-      const menuEl = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-menu");
-      const firstMenuItem = menuEl.querySelectorAll("li")[0];
-      return firstMenuItem.classList.contains("focused-option");
-    });
-    expect(FirstOptionClassIsFocusedOption).toBeTruthy();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
-    expect(await input.getProperty("value")).toBe("bar");
-  });
-  it("should be able to select second menu item after selecting an initial menu item", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    let firstOption = (await menu.findAll("li"))[0];
-    expect(firstOption).toHaveClass("focused-option");
-    await searchBar.press("Enter");
-    await page.waitForChanges();
-    const value = await searchBar.getProperty("value");
-    await page.waitForChanges();
-    expect(value).toBe("bar");
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    await searchBar.press("ArrowDown");
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    firstOption = (await menu.findAll("li"))[0];
-    const lastOption = (await menu.findAll("li"))[1];
-    expect(firstOption).not.toHaveClass("focused-option");
-    expect(lastOption).toHaveClass("focused-option");
-    await searchBar.press("Enter");
-    await page.waitForChanges();
-    expect(await searchBar.getProperty("value")).toBe("qux");
-  });
-  it("should tab through search bar from input > clear > submit > ic-menu when options are available", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    let focusedElement = await page.evaluate(() => {
-      const el = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-text-field");
-      return el.shadowRoot.activeElement.id;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("zzz", page);
+        await page.waitForChanges();
+        const searchSubmitBtn = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
+        expect(await searchSubmitBtn.getProperty("disabled")).toBeTruthy();
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0");
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar");
-      return el.shadowRoot.activeElement.id;
+    it("should focus on first option when ic-menu rendered and Enter should select option", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <ic-search-bar label="Test Label"></ic-search-bar>
+    `);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        const FirstOptionClassIsFocusedOption = await page.evaluate(() => {
+            const menuEl = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-menu");
+            const firstMenuItem = menuEl.querySelectorAll("li")[0];
+            return firstMenuItem.classList.contains("focused-option");
+        });
+        expect(FirstOptionClassIsFocusedOption).toBeTruthy();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
+        expect(await input.getProperty("value")).toBe("bar");
     });
-    expect(focusedElement).toBe("clear-button");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar");
-      return el.shadowRoot.activeElement.id;
+    it("should be able to select second menu item after selecting an initial menu item", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        let firstOption = (await menu.findAll("li"))[0];
+        expect(firstOption).toHaveClass("focused-option");
+        await searchBar.press("Enter");
+        await page.waitForChanges();
+        const value = await searchBar.getProperty("value");
+        await page.waitForChanges();
+        expect(value).toBe("bar");
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        await searchBar.press("ArrowDown");
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        firstOption = (await menu.findAll("li"))[0];
+        const lastOption = (await menu.findAll("li"))[1];
+        expect(firstOption).not.toHaveClass("focused-option");
+        expect(lastOption).toHaveClass("focused-option");
+        await searchBar.press("Enter");
+        await page.waitForChanges();
+        expect(await searchBar.getProperty("value")).toBe("qux");
     });
-    expect(focusedElement).toBe("search-submit-button");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar").shadowRoot;
-      return el.activeElement.id;
+    it("should tab through search bar from input > clear > submit > ic-menu (when options are available) > back to search bar", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        let focusedElement = await page.evaluate(() => {
+            const el = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-text-field");
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(focusedElement).toBe("ic-search-bar-input-0");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        focusedElement = await page.evaluate(() => {
+            const el = document.querySelector("ic-search-bar");
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(focusedElement).toBe("clear-button");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        focusedElement = await page.evaluate(() => {
+            const el = document.querySelector("ic-search-bar");
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(focusedElement).toBe("search-submit-button");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        focusedElement = await page.evaluate(() => {
+            const el = document.querySelector("ic-search-bar").shadowRoot;
+            return el.activeElement.id;
+        });
+        expect(focusedElement).toBe("ic-search-bar-input-0-menu-bar");
+        await page.waitForChanges();
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        focusedElement = await page.evaluate(() => {
+            const el = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-text-field");
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(focusedElement).toBe("ic-search-bar-input-0");
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0-menu-bar");
-  });
-  it("menu is still rendered when Shift is pressed while focus on input", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Shift");
-    const menu = await page.find("ic-search-bar >>> ic-menu");
-    expect(await menu.isVisible()).toBeTruthy();
-  });
-  it("focuses back onto search bar from menu", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar").shadowRoot;
-      return el.activeElement.id;
+    it("menu is still rendered when Shift is pressed while focus on input", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("Shift");
+        const menu = await page.find("ic-search-bar >>> ic-menu");
+        expect(await menu.isVisible()).toBeTruthy();
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0-menu-bar");
-    await page.waitForChanges();
-    await page.keyboard.down("Shift");
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    focusedElement = await page.$eval("ic-search-bar", (el) => {
-      const textfield = el.shadowRoot.querySelector("ic-text-field");
-      return textfield.shadowRoot.activeElement.id;
+    it("displays tooltip on search buttons when enabled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let submitSearchTooltipDisplay = await page.evaluate(() => {
+            const tooltip = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("#search-submit-button")
+                .shadowRoot.querySelector("ic-tooltip")
+                .shadowRoot.querySelector(".ic-tooltip-container");
+            return window.getComputedStyle(tooltip).display;
+        });
+        expect(submitSearchTooltipDisplay).toBe("none");
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForTimeout(300);
+        const clearTooltipDisplay = await page.evaluate(() => {
+            const tooltip = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("#clear-button")
+                .shadowRoot.querySelector("ic-tooltip")
+                .shadowRoot.querySelector(".ic-tooltip-container");
+            return window.getComputedStyle(tooltip).display;
+        });
+        expect(clearTooltipDisplay).toBe("block");
+        await page.keyboard.press("Tab");
+        await page.waitForTimeout(300);
+        submitSearchTooltipDisplay = await page.evaluate(() => {
+            const tooltip = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("#search-submit-button")
+                .shadowRoot.querySelector("ic-tooltip")
+                .shadowRoot.querySelector(".ic-tooltip-container");
+            return window.getComputedStyle(tooltip).display;
+        });
+        expect(submitSearchTooltipDisplay).toBe("block");
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0");
-  });
-  it("displays tooltip on search buttons when enabled", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let submitSearchTooltipDisplay = await page.evaluate(() => {
-      const tooltip = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("#search-submit-button")
-        .shadowRoot.querySelector("ic-tooltip")
-        .shadowRoot.querySelector(".ic-tooltip-container");
-      return window.getComputedStyle(tooltip).display;
+    it("should highlight first option again after no results found", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <ic-search-bar label="Test Label"></ic-search-bar>
+    `);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("barr", page);
+        await page.waitForChanges();
+        const noOptionsLabel = await page.evaluate(() => {
+            const menuEl = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-menu");
+            const noOptionsItem = menuEl.querySelectorAll("li")[0];
+            return noOptionsItem.innerText;
+        });
+        expect(noOptionsLabel).toBe("No results found");
+        await page.waitForChanges();
+        await page.keyboard.press("Backspace");
+        await page.waitForTimeout(500);
+        const firstOptionFocused = await page.evaluate(() => {
+            const menuEl = document
+                .querySelector("ic-search-bar")
+                .shadowRoot.querySelector("ic-menu");
+            const firstOptionItem = menuEl.querySelectorAll("li")[0];
+            return firstOptionItem.classList.contains("focused-option");
+        });
+        expect(firstOptionFocused).toBeTruthy();
     });
-    expect(submitSearchTooltipDisplay).toBe("none");
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.waitForTimeout(300);
-    const clearTooltipDisplay = await page.evaluate(() => {
-      const tooltip = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("#clear-button")
-        .shadowRoot.querySelector("ic-tooltip")
-        .shadowRoot.querySelector(".ic-tooltip-container");
-      return window.getComputedStyle(tooltip).display;
+    it("focuses onto button from search bar", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <ic-search-bar label="Test Label"></ic-search-bar>
+      <ic-button id="button">Foo</ic-button>
+    `);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        let focusedElement = await page.evaluate(() => {
+            const el = document.querySelector("ic-search-bar").shadowRoot;
+            return el.activeElement.id;
+        });
+        expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        focusedElement = await page.evaluate(() => {
+            return document.activeElement.id;
+        });
+        expect(focusedElement).toBe("button");
     });
-    expect(clearTooltipDisplay).toBe("block");
-    await page.keyboard.press("Tab");
-    await page.waitForTimeout(300);
-    submitSearchTooltipDisplay = await page.evaluate(() => {
-      const tooltip = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("#search-submit-button")
-        .shadowRoot.querySelector("ic-tooltip")
-        .shadowRoot.querySelector(".ic-tooltip-container");
-      return window.getComputedStyle(tooltip).display;
+    it("should emit icChange on delay", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" debounce="500"></ic-search-bar>`);
+        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",
+        });
     });
-    expect(submitSearchTooltipDisplay).toBe("block");
-  });
-  it("should highlight first option again after no results found", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should highlight the menu option items in the correct order with arrowDown", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("barr", page);
-    await page.waitForChanges();
-    const noOptionsLabel = await page.evaluate(() => {
-      const menuEl = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-menu");
-      const noOptionsItem = menuEl.querySelectorAll("li")[0];
-      return noOptionsItem.innerText;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", longOptions);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("it", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        // First option has focused-option
+        let option = (await menu.findAll("li"))[0];
+        expect(option).toHaveClass("focused-option");
+        // Other options should not
+        for (let i = 1; i < longOptions.length; i++) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
+        // Highlight the next option
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        option = (await menu.findAll("li"))[1];
+        expect(option).toHaveClass("focused-option");
+        for (let i = 2; i < longOptions.length; i++) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        option = (await menu.findAll("li"))[2];
+        expect(option).toHaveClass("focused-option");
+        for (let i = 3; i < longOptions.length; i++) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
     });
-    expect(noOptionsLabel).toBe("No results found");
-    await page.waitForChanges();
-    await page.keyboard.press("Backspace");
-    await page.waitForTimeout(500);
-    const firstOptionFocused = await page.evaluate(() => {
-      const menuEl = document
-        .querySelector("ic-search-bar")
-        .shadowRoot.querySelector("ic-menu");
-      const firstOptionItem = menuEl.querySelectorAll("li")[0];
-      return firstOptionItem.classList.contains("focused-option");
-    });
-    expect(firstOptionFocused).toBeTruthy();
-  });
-  it("focuses onto button from search bar", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("should highlight the menu option items in the correct order with arrowUp", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
       <ic-search-bar label="Test Label"></ic-search-bar>
-      <ic-button id="button">Foo</ic-button>
     `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    let focusedElement = await page.evaluate(() => {
-      const el = document.querySelector("ic-search-bar").shadowRoot;
-      return el.activeElement.id;
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", longOptions);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("it", page);
+        await page.waitForChanges();
+        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        // First option has focused-option class
+        let option = (await menu.findAll("li"))[0];
+        expect(option).toHaveClass("focused-option");
+        // Other options should not have focused-option class
+        for (let i = 1; i < longOptions.length; i++) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
+        // Highlight the last option
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        option = (await menu.findAll("li"))[longOptions.length - 1];
+        expect(option).toHaveClass("focused-option");
+        for (let i = longOptions.length - 2; i >= 0; i--) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        option = (await menu.findAll("li"))[longOptions.length - 2];
+        expect(option).toHaveClass("focused-option");
+        for (let i = longOptions.length - 3; i >= 0; i--) {
+            option = (await menu.findAll("li"))[i];
+            expect(option).not.toHaveClass("focused-option");
+        }
     });
-    expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
-    await page.waitForChanges();
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    focusedElement = await page.evaluate(() => {
-      return document.activeElement.id;
+    it("should reverse tab to submit button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        await page.keyboard.down("ArrowDown");
+        await page.waitForChanges();
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const activeElId = await page.$eval("ic-search-bar", (el) => {
+            return el.shadowRoot.activeElement.id;
+        });
+        expect(activeElId).toBe("search-submit-button");
     });
-    expect(focusedElement).toBe("button");
-  });
-  it("should emit icChange on delay", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" debounce="500"></ic-search-bar>`);
-    await page.waitForChanges();
-    const icChange = await page.spyOnEvent("icChange");
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForTimeout(600);
-    expect(icChange).toHaveReceivedEventDetail({
-      value: "foo",
+    it("should not filter options when disable-filter is set to true", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" disable-filter="true"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("foo", page);
+        await page.waitForChanges();
+        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions).toHaveLength(options.length);
     });
-    await focusAndTypeIntoInput("bar", page);
-    await page.waitForChanges();
-    await page.waitForTimeout(100);
-    expect(icChange).toHaveReceivedEventDetail({
-      value: "foo",
+    it("should select the highlighted option when submit search is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        // Select first filtered option
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        let menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[0];
+        expect(menuOption).toHaveClass("focused-option");
+        expect(menuOption).toEqualText("bar");
+        await searchSubmitButton.click();
+        await page.waitForChanges();
+        expect(await searchBar.getProperty("value")).toBe("bar");
+        // Select second filtered option
+        const clearButton = await page.find("ic-search-bar >>> ic-text-field ic-button.clear-button");
+        await clearButton.click();
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[1];
+        expect(menuOption).toHaveClass("focused-option");
+        expect(menuOption).toEqualText("baz");
+        await searchSubmitButton.click();
+        await page.waitForChanges();
+        expect(await searchBar.getProperty("value")).toBe("qux");
     });
-    await page.waitForTimeout(500);
-    expect(icChange).toHaveReceivedEventDetail({
-      value: "foobar",
+    it("should display the loading option in the menu when loading then cancel loading when options provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" loading-label="load" disable-filter="true"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions).toHaveLength(1);
+        expect(menuOptions[0]).toHaveClass("loading-option");
+        expect(menuOptions[0]).toEqualText("load");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions).toHaveLength(3);
+        expect(menuOptions[0]).not.toHaveClass("loading-option");
+        expect(searchBar.getProperty("loading")).toBeFalsy;
     });
-  });
-  it("should highlight the menu option items in the correct order with arrowDown", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", longOptions);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("it", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    // First option has focused-option
-    let option = (await menu.findAll("li"))[0];
-    expect(option).toHaveClass("focused-option");
-    // Other options should not
-    for (let i = 1; i < longOptions.length; i++) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-    // Highlight the next option
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    option = (await menu.findAll("li"))[1];
-    expect(option).toHaveClass("focused-option");
-    for (let i = 2; i < longOptions.length; i++) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    option = (await menu.findAll("li"))[2];
-    expect(option).toHaveClass("focused-option");
-    for (let i = 3; i < longOptions.length; i++) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-  });
-  it("should highlight the menu option items in the correct order with arrowUp", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", longOptions);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("it", page);
-    await page.waitForChanges();
-    const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    // First option has focused-option class
-    let option = (await menu.findAll("li"))[0];
-    expect(option).toHaveClass("focused-option");
-    // Other options should not have focused-option class
-    for (let i = 1; i < longOptions.length; i++) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-    // Highlight the last option
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    option = (await menu.findAll("li"))[longOptions.length - 1];
-    expect(option).toHaveClass("focused-option");
-    for (let i = longOptions.length - 2; i >= 0; i--) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    option = (await menu.findAll("li"))[longOptions.length - 2];
-    expect(option).toHaveClass("focused-option");
-    for (let i = longOptions.length - 3; i >= 0; i--) {
-      option = (await menu.findAll("li"))[i];
-      expect(option).not.toHaveClass("focused-option");
-    }
-  });
-  it("should reverse tab to submit button", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    await page.keyboard.down("ArrowDown");
-    await page.waitForChanges();
-    await page.keyboard.down("Shift");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    const activeElId = await page.$eval("ic-search-bar", (el) => {
-      return el.shadowRoot.activeElement.id;
+    it("should display the timeout state in the menu when timed out and should not update the options", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" loading-error-label="error message" timeout="1000" disable-filter="true"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(1000);
+        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions).toHaveLength(1);
+        expect(menuOptions[0]).toHaveClass("timeout");
+        expect(await menuOptions[0].find("ic-typography")).toEqualText("error message");
+        expect(await menuOptions[0].find("#retry-button")).not.toBeNull;
+        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
+        expect(await searchSubmitButton.getProperty("disabled")).toBeTruthy;
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        expect(menuOptions).toHaveLength(1);
+        expect(menuOptions[0]).toHaveClass("timeout");
+    });
+    it("should be able to focus retry button using tab and should keep loading state when menu closed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(1000);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("retry-button");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(menu).toBeNull;
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
+        expect(await menu.isVisible()).toBeTruthy;
+        expect(await menu.findAll("li")).toHaveLength(1);
+    });
+    it("should trigger a retry when the retry button is pressed using space and enter", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(1000);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const retryButton = await page.find("ic-search-bar >>> ic-text-field ic-menu #retry-button");
+        await retryButton.press("Enter");
+        await page.waitForChanges();
+        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).toEqualText("Loading...");
+        await page.waitForTimeout(1000);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await retryButton.press(" ");
+        await page.waitForChanges();
+        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOptions[0]).toEqualText("Loading...");
+    });
+    it("should cancel loading when clear button is pressed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000"></ic-search-bar>`);
+        const searchBar = await page.find("ic-search-bar");
+        searchBar.setProperty("options", options);
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(1000);
+        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
+        await clearButton.click();
+        await page.waitForChanges();
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(750);
+        let menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOption).toEqualText("Loading...");
+        await clearButton.click();
+        await page.waitForChanges();
+        //Check that the timeout was cancelled
+        await page.waitForTimeout(1000);
+        await searchBar.click();
+        await page.waitForChanges();
+        expect(await page.find("ic-search-bar >>> ic-text-field ic-menu")).toBeNull;
+        await focusAndTypeIntoInput("ba", page);
+        searchBar.setProperty("loading", true);
+        await page.waitForChanges();
+        await page.waitForTimeout(750);
+        menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
+        expect(menuOption).toEqualText("Loading...");
     });
-    expect(activeElId).toBe("search-submit-button");
-  });
-  it("should not filter options when disable-filter is set to true", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" disable-filter="true"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("foo", page);
-    await page.waitForChanges();
-    const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions).toHaveLength(options.length);
-  });
-  it("should select the highlighted option when submit search is clicked", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    // Select first filtered option
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    let menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[0];
-    expect(menuOption).toHaveClass("focused-option");
-    expect(menuOption).toEqualText("bar");
-    await searchSubmitButton.click();
-    await page.waitForChanges();
-    expect(await searchBar.getProperty("value")).toBe("bar");
-    // Select second filtered option
-    const clearButton = await page.find("ic-search-bar >>> ic-text-field ic-button.clear-button");
-    await clearButton.click();
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[1];
-    expect(menuOption).toHaveClass("focused-option");
-    expect(menuOption).toEqualText("baz");
-    await searchSubmitButton.click();
-    await page.waitForChanges();
-    expect(await searchBar.getProperty("value")).toBe("qux");
-  });
-  it("should display the loading option in the menu when loading then cancel loading when options provided", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" loading-label="load" disable-filter="true"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions).toHaveLength(1);
-    expect(menuOptions[0]).toHaveClass("loading-option");
-    expect(menuOptions[0]).toEqualText("load");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions).toHaveLength(3);
-    expect(menuOptions[0]).not.toHaveClass("loading-option");
-    expect(searchBar.getProperty("loading")).toBeFalsy;
-  });
-  it("should display the timeout state in the menu when timed out and should not update the options", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" loading-error-label="error message" timeout="1000" disable-filter="true"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(1000);
-    const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions).toHaveLength(1);
-    expect(menuOptions[0]).toHaveClass("timeout");
-    expect(await menuOptions[0].find("ic-typography")).toEqualText("error message");
-    expect(await menuOptions[0].find("#retry-button")).not.toBeNull;
-    const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-    expect(await searchSubmitButton.getProperty("disabled")).toBeTruthy;
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    expect(menuOptions).toHaveLength(1);
-    expect(menuOptions[0]).toHaveClass("timeout");
-  });
-  it("should be able to focus retry button using tab and should keep loading state when menu closed", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(1000);
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("retry-button");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(menu).toBeNull;
-    await page.keyboard.down("Shift");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-    expect(await menu.isVisible()).toBeTruthy;
-    expect(await menu.findAll("li")).toHaveLength(1);
-  });
-  it("should trigger a retry when the retry button is pressed using space and enter", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(1000);
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    const retryButton = await page.find("ic-search-bar >>> ic-text-field ic-menu #retry-button");
-    await retryButton.press("Enter");
-    await page.waitForChanges();
-    let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).toEqualText("Loading...");
-    await page.waitForTimeout(1000);
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await retryButton.press(" ");
-    await page.waitForChanges();
-    menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOptions[0]).toEqualText("Loading...");
-  });
-  it("should cancel loading when clear button is pressed", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-search-bar label="Test Label" timeout="1000"></ic-search-bar>`);
-    const searchBar = await page.find("ic-search-bar");
-    searchBar.setProperty("options", options);
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(1000);
-    const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-    await clearButton.click();
-    await page.waitForChanges();
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(750);
-    let menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOption).toEqualText("Loading...");
-    await clearButton.click();
-    await page.waitForChanges();
-    //Check that the timeout was cancelled
-    await page.waitForTimeout(1000);
-    await searchBar.click();
-    await page.waitForChanges();
-    expect(await page.find("ic-search-bar >>> ic-text-field ic-menu")).toBeNull;
-    await focusAndTypeIntoInput("ba", page);
-    searchBar.setProperty("loading", true);
-    await page.waitForChanges();
-    await page.waitForTimeout(750);
-    menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
-    expect(menuOption).toEqualText("Loading...");
-  });
 });
 //# sourceMappingURL=ic-search-bar.e2e.js.map