feat(combobox): make combobox clearable

src/assets/styles/includes.scss

@@ -74,3 +74,61 @@
     pointer-events: none;
   }
 }
+
+@mixin xButton() {
+  :host([scale="s"]) {
+    .x-button {
+      inline-size: theme("spacing.4");
+      block-size: theme("spacing.4");
+    }
+  }
+
+  :host([scale="m"]) {
+    .x-button {
+      inline-size: theme("spacing.6");
+      block-size: theme("spacing.6");
+    }
+  }
+
+  :host([scale="l"]) {
+    .x-button {
+      inline-size: theme("spacing.8");
+      block-size: theme("spacing.8");
+    }
+  }
+
+  .x-button {
+    @apply appearance-none
+    bg-transparent
+    border-2
+    content-center
+    cursor-pointer
+    flex
+    focus-base
+    items-center
+    justify-center
+    m-0
+    self-center
+    text-color-3
+    transition-default;
+
+    border-radius: 50%;
+    border-color: transparent;
+    background-color: var(--calcite-ui-foreground-2);
+
+    &:active,
+    &:hover {
+      @apply text-color-1;
+      background-color: var(--calcite-ui-foreground-3);
+    }
+
+    &:active {
+      @apply border-solid;
+      border-color: theme("borderColor.color-brand");
+    }
+
+    & calcite-icon {
+      color: inherit;
+    }
+  }
+}

src/components/combobox-item/combobox-item.tsx

@@ -127,11 +127,14 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   //
   // --------------------------------------------------------------------------
 
-  toggleSelected(coerce?: boolean): Promise<void> {
-    if (this.disabled) {
+  toggleSelected(): Promise<void> {
+    const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
+
+    if (this.disabled || (isSingleSelect && this.selected)) {
       return;
     }
-    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+
+    this.selected = !this.selected;
   }
 
   itemClickHandler = (event: MouseEvent): void => {

src/components/combobox/assets/combobox/t9n/messages.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Remove tag"
 }

src/components/combobox/assets/combobox/t9n/messages_en.json

@@ -1,3 +1,4 @@
 {
+  "clear": "Clear value",
   "removeTag": "Remove tag"
 }

src/components/combobox/combobox.e2e.ts

@@ -8,11 +8,13 @@ import {
   floatingUIOwner,
   formAssociated,
   disabled,
-  t9n
+  t9n,
+  reflects
 } from "../../tests/commonTests";
 
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
+import { CSS as XButtonCSS } from "../functional/XButton";
 import { skipAnimations } from "../../tests/utils";
 
 describe("calcite-combobox", () => {
@@ -22,6 +24,10 @@ describe("calcite-combobox", () => {
 
   it("defaults", async () =>
     defaults("calcite-combobox", [
+      {
+        propertyName: "clearDisabled",
+        defaultValue: false
+      },
       {
         propertyName: "overlayPositioning",
         defaultValue: "absolute"
@@ -32,6 +38,58 @@ describe("calcite-combobox", () => {
       }
     ]));
 
+  it("reflects", async () =>
+    reflects("calcite-combobox", [
+      {
+        propertyName: "allowCustomValues",
+        value: true
+      },
+      {
+        propertyName: "clearDisabled",
+        value: true
+      },
+      {
+        propertyName: "disabled",
+        value: true
+      },
+      {
+        propertyName: "form",
+        value: "test-form"
+      },
+      {
+        propertyName: "maxItems",
+        value: 1
+      },
+      {
+        propertyName: "name",
+        value: "test-name"
+      },
+      {
+        propertyName: "open",
+        value: true
+      },
+      {
+        propertyName: "placeholderIcon",
+        value: "banana"
+      },
+      {
+        propertyName: "placeholderIconFlipRtl",
+        value: true
+      },
+      {
+        propertyName: "required",
+        value: true
+      },
+      {
+        propertyName: "scale",
+        value: "m"
+      },
+      {
+        propertyName: "selectionMode",
+        value: "single"
+      }
+    ]));
+
   describe("honors hidden attribute", () => {
     hidden("calcite-combobox");
   });
@@ -303,33 +361,86 @@ describe("calcite-combobox", () => {
   });
 
   describe("item selection", () => {
-    it("should add/remove item to the selected items when an item is clicked", async () => {
-      const page = await newE2EPage();
-      await page.setContent(
-        html`
-          <calcite-combobox>
-            <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
-            <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
-          </calcite-combobox>
-        `
-      );
-      const cbox = await page.find("calcite-combobox");
-      const openEvent = page.waitForEvent("calciteComboboxOpen");
-      await cbox.click();
-      await openEvent;
+    describe("toggling items", () => {
+      it("single-selection mode does not allow toggling selection once the selected item is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          html`
+            <calcite-combobox>
+              <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+              <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+            </calcite-combobox>
+          `
+        );
+        const cbox = await page.find("calcite-combobox");
+        const openEvent = page.waitForEvent("calciteComboboxOpen");
+        await cbox.click();
+        await openEvent;
+
+        const item1 = await cbox.find("calcite-combobox-item[value=one]");
 
-      let item1 = await cbox.find("calcite-combobox-item[value=one]");
-      await item1.click();
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
 
-      let chip = await page.find("calcite-combobox >>> calcite-chip");
-      expect(chip).toBeDefined();
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
+      });
 
-      item1 = await cbox.find("calcite-combobox-item[value=one]");
-      await item1.click();
-      await page.waitForChanges();
+      it("multiple-selection mode allows toggling selection once the selected item is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          html`
+            <calcite-combobox selection-mode="multiple">
+              <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+              <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+            </calcite-combobox>
+          `
+        );
+        const cbox = await page.find("calcite-combobox");
+        const openEvent = page.waitForEvent("calciteComboboxOpen");
+        await cbox.click();
+        await openEvent;
+
+        const item1 = await cbox.find("calcite-combobox-item[value=one]");
 
-      chip = await page.find("calcite-combobox >>> calcite-chip");
-      expect(chip).toBeNull();
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
+
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeNull();
+
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
+      });
+
+      it("ancestors-selection mode allows toggling selection once the selected item is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          html`
+            <calcite-combobox selection-mode="ancestors">
+              <calcite-combobox-item value="one" text-label="parent">
+                <calcite-combobox-item value="two" text-label="child1"></calcite-combobox-item>
+                <calcite-combobox-item value="three" text-label="child2"></calcite-combobox-item>
+              </calcite-combobox-item>
+            </calcite-combobox>
+          `
+        );
+        const cbox = await page.find("calcite-combobox");
+        const openEvent = page.waitForEvent("calciteComboboxOpen");
+        await cbox.click();
+        await openEvent;
+
+        const item1 = await cbox.find("calcite-combobox-item[value=one]");
+
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
+
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeNull();
+
+        await item1.click();
+        expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
+      });
     });
 
     it("should select parent in ancestor selection mode", async () => {
@@ -540,6 +651,72 @@ describe("calcite-combobox", () => {
     });
   });
 
+  describe("clearing values", () => {
+    const testCases = [
+      {
+        selectionMode: "single",
+        html: html`
+          <calcite-combobox selection-mode="single">
+            <calcite-combobox-item selected id="one" value="one" text-label="one"></calcite-combobox-item>
+            <calcite-combobox-item id="two" value="two" text-label="two"></calcite-combobox-item>
+            <calcite-combobox-item id="three" value="three" text-label="three"></calcite-combobox-item>
+          </calcite-combobox>
+        `
+      },
+      {
+        selectionMode: "multiple",
+        html: html`
+          <calcite-combobox selection-mode="multiple">
+            <calcite-combobox-item selected id="one" value="one" text-label="one"></calcite-combobox-item>
+            <calcite-combobox-item selected id="two" value="two" text-label="two"></calcite-combobox-item>
+            <calcite-combobox-item selected id="three" value="three" text-label="three"></calcite-combobox-item>
+          </calcite-combobox>
+        `
+      },
+      {
+        selectionMode: "ancestors",
+        html: html`
+          <calcite-combobox selection-mode="ancestors">
+            <calcite-combobox-item value="parent" text-label="parent">
+              <calcite-combobox-item value="child1" text-label="child1"></calcite-combobox-item>
+              <calcite-combobox-item selected value="child2" text-label="child2"></calcite-combobox-item>
+            </calcite-combobox-item>
+          </calcite-combobox>
+        `
+      }
+    ];
+
+    async function assertValueClearing(html: string, mode: "mouse" | "keyboard"): Promise<void> {
+      const page = await newE2EPage();
+      await page.setContent(html);
+
+      const combobox = await page.find("calcite-combobox");
+      if (mode === "mouse") {
+        const xButton = await page.find(`calcite-combobox >>> .${XButtonCSS.button}`);
+        await xButton.click();
+      } else {
+        await combobox.callMethod("setFocus");
+        await page.keyboard.press("Escape");
+      }
+
+      expect(await combobox.getProperty("value")).toBe("");
+    }
+
+    describe("via mouse", () => {
+      testCases.forEach((testCase) => {
+        it(`clears the value in ${testCase.selectionMode}-selection mode`, () =>
+          assertValueClearing(testCase.html, "mouse"));
+      });
+    });
+
+    describe("via keyboard", () => {
+      testCases.forEach((testCase) => {
+        it(`clears the value in ${testCase.selectionMode}-selection mode`, () =>
+          assertValueClearing(testCase.html, "keyboard"));
+      });
+    });
+  });
+
   describe("keyboard navigation", () => {
     let page: E2EPage;
     const scrollablePageSizeInPx = 2400;

src/components/combobox/combobox.scss

@@ -11,26 +11,39 @@
 }
 
 @include disabled();
+@include xButton();
 
 :host([scale="s"]) {
   @apply text-n2;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-input-height: theme("spacing.6");
+
+  .x-button {
+    margin-inline-end: theme("spacing.2");
+  }
 }
 
 :host([scale="m"]) {
   @apply text-n1;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
   --calcite-combobox-input-height: theme("spacing.8");
+
+  .x-button {
+    margin-inline-end: theme("spacing.4");
+  }
 }
 
 :host([scale="l"]) {
   @apply text-0;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
   --calcite-combobox-input-height: theme("spacing.11");
+
+  .x-button {
+    margin-inline-end: theme("spacing.6");
+  }
 }
 
 .wrapper {