From 551927dabfcbfdcaa04518a4f519008a5e96c5a6 Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Fri, 19 Jul 2024 09:45:29 -0700 Subject: [PATCH 1/2] feat(combobox): append custom values to top of dropdown --- .../src/components/combobox/combobox.e2e.ts | 46 ++++++++++++++----- .../src/components/combobox/combobox.tsx | 2 +- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 6b195d744a7..737739feaeb 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -875,7 +875,7 @@ describe("calcite-combobox", () => { await input.press("Enter"); await page.waitForChanges(); - const item = await page.find("calcite-combobox-item:last-child"); + const item = await page.find("calcite-combobox-item:first-child"); expect(await item.getProperty("textLabel")).toBe("K"); const combobox = await page.find("calcite-combobox"); @@ -889,8 +889,8 @@ describe("calcite-combobox", () => { await skipAnimations(page); await page.setContent(html` - - + + `); @@ -902,23 +902,23 @@ describe("calcite-combobox", () => { await input.press("Enter"); await page.waitForChanges(); - const item1 = await page.find("calcite-combobox-item#one"); - const item2 = await page.find("calcite-combobox-item:last-child"); + const item1 = await page.find("calcite-combobox-item:first-child"); + const item2 = await page.find("calcite-combobox-item#two"); - expect(await item2.getProperty("textLabel")).toBe("K"); + expect(await item1.getProperty("textLabel")).toBe("K"); expect((await combobox.getProperty("selectedItems")).length).toBe(1); - expect(await item1.getProperty("selected")).toBe(false); - expect(await item2.getProperty("selected")).toBe(true); + expect(await item1.getProperty("selected")).toBe(true); + expect(await item2.getProperty("selected")).toBe(false); }); it("should auto-select new custom values in multiple selection mode", async () => { const page = await newE2EPage(); await page.setContent(html` - + - + `); const combobox = await page.find("calcite-combobox"); @@ -930,9 +930,9 @@ describe("calcite-combobox", () => { await input.press("Escape"); await page.waitForChanges(); - const item1 = await page.find("calcite-combobox-item#one"); + const item1 = await page.find("calcite-combobox-item:first-child"); const item2 = await page.find("calcite-combobox-item#two"); - const item3 = await page.find("calcite-combobox-item:last-child"); + const item3 = await page.find("calcite-combobox-item#three"); const chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect((await combobox.getProperty("selectedItems")).length).toBe(3); @@ -1668,6 +1668,28 @@ describe("calcite-combobox", () => { expect(chips.length).toBe(1); }); + it("should append unknown tag to top of list", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + + `); + const input = await page.find("calcite-combobox >>> input"); + + await input.click(); + await page.keyboard.type("one"); + await input.press("Enter"); + await page.waitForChanges(); + + const firstItem = await page.find("calcite-combobox-item:first-child"); + expect(await firstItem.getProperty("textLabel")).toBe("one"); + + const lastItem = await page.find("calcite-combobox-item:last-child"); + expect(await lastItem.getProperty("textLabel")).toBe("three"); + }); + it("should fire calciteComboboxChange when entering new unknown tag", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 8c7506bf9a2..b6843a74149 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1292,7 +1292,7 @@ export class Combobox item.value = value; item.textLabel = value; item.selected = true; - this.el.appendChild(item); + this.el.prepend(item); this.resetText(); if (focus) { this.setFocus(); From 05682b79ee19bc4866d24e45af732812add3e78b Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Mon, 22 Jul 2024 10:05:59 -0700 Subject: [PATCH 2/2] feat(combobox): update end to end test --- .../src/components/combobox/combobox.e2e.ts | 46 +++++-------------- 1 file changed, 12 insertions(+), 34 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 737739feaeb..ca51eed1981 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -889,8 +889,8 @@ describe("calcite-combobox", () => { await skipAnimations(page); await page.setContent(html` - - + + `); @@ -902,23 +902,23 @@ describe("calcite-combobox", () => { await input.press("Enter"); await page.waitForChanges(); - const item1 = await page.find("calcite-combobox-item:first-child"); - const item2 = await page.find("calcite-combobox-item#two"); + const customValue = await page.find("calcite-combobox-item:first-child"); + const item1 = await page.find("calcite-combobox-item#one"); - expect(await item1.getProperty("textLabel")).toBe("K"); + expect(await customValue.getProperty("textLabel")).toBe("K"); expect((await combobox.getProperty("selectedItems")).length).toBe(1); - expect(await item1.getProperty("selected")).toBe(true); - expect(await item2.getProperty("selected")).toBe(false); + expect(await customValue.getProperty("selected")).toBe(true); + expect(await item1.getProperty("selected")).toBe(false); }); it("should auto-select new custom values in multiple selection mode", async () => { const page = await newE2EPage(); await page.setContent(html` - + - + `); const combobox = await page.find("calcite-combobox"); @@ -930,16 +930,16 @@ describe("calcite-combobox", () => { await input.press("Escape"); await page.waitForChanges(); - const item1 = await page.find("calcite-combobox-item:first-child"); + const customValue = await page.find("calcite-combobox-item:first-child"); + const item1 = await page.find("calcite-combobox-item#one"); const item2 = await page.find("calcite-combobox-item#two"); - const item3 = await page.find("calcite-combobox-item#three"); const chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect((await combobox.getProperty("selectedItems")).length).toBe(3); expect(chips[2].textContent).toBe("K"); + expect(await customValue.getProperty("selected")).toBe(true); expect(await item1.getProperty("selected")).toBe(true); expect(await item2.getProperty("selected")).toBe(true); - expect(await item3.getProperty("selected")).toBe(true); }); }); @@ -1668,28 +1668,6 @@ describe("calcite-combobox", () => { expect(chips.length).toBe(1); }); - it("should append unknown tag to top of list", async () => { - const page = await newE2EPage(); - await page.setContent(html` - - - - - `); - const input = await page.find("calcite-combobox >>> input"); - - await input.click(); - await page.keyboard.type("one"); - await input.press("Enter"); - await page.waitForChanges(); - - const firstItem = await page.find("calcite-combobox-item:first-child"); - expect(await firstItem.getProperty("textLabel")).toBe("one"); - - const lastItem = await page.find("calcite-combobox-item:last-child"); - expect(await lastItem.getProperty("textLabel")).toBe("three"); - }); - it("should fire calciteComboboxChange when entering new unknown tag", async () => { const page = await newE2EPage(); await page.setContent(html`