From 44af3096adb6bbf5424c7aae83df054513c79016 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 16 Jul 2021 15:02:33 -0700
Subject: [PATCH] fix(tree): fix item selection when multi + input-enabled
 (#2555)

#2437
---
 .../calcite-tree-item/calcite-tree-item.tsx   |  2 +-
 .../calcite-tree/calcite-tree.e2e.ts          | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/components/calcite-tree-item/calcite-tree-item.tsx b/src/components/calcite-tree-item/calcite-tree-item.tsx
index f26f1470c5d..6e110a11bf4 100644
--- a/src/components/calcite-tree-item/calcite-tree-item.tsx
+++ b/src/components/calcite-tree-item/calcite-tree-item.tsx
@@ -191,7 +191,7 @@ export class CalciteTreeItem {
     }
     this.expanded = !this.expanded;
     this.calciteTreeItemSelect.emit({
-      modifyCurrentSelection: (e as any).shiftKey,
+      modifyCurrentSelection: (e as any).shiftKey || this.inputEnabled,
       forceToggle: false
     });
   }
diff --git a/src/components/calcite-tree/calcite-tree.e2e.ts b/src/components/calcite-tree/calcite-tree.e2e.ts
index a4356350b1f..70014f51d09 100644
--- a/src/components/calcite-tree/calcite-tree.e2e.ts
+++ b/src/components/calcite-tree/calcite-tree.e2e.ts
@@ -187,6 +187,47 @@ describe("calcite-tree", () => {
       expect(selectEventSpy).toHaveReceivedEventTimes(3);
     });
 
+    describe("has selected items in the selection event payload", () =>
+      it("contains current selection when selection=multi + input-enabled", async () => {
+        const page = await newE2EPage({
+          html: html` <calcite-tree selection-mode="multi" input-enabled>
+            <calcite-tree-item id="1">1</calcite-tree-item>
+            <calcite-tree-item id="2">2</calcite-tree-item>
+          </calcite-tree>`
+        });
+
+        const [item1, item2] = await page.findAll("calcite-tree-item");
+
+        type TestWindow = {
+          selectedIds: string[];
+        } & Window &
+          typeof globalThis;
+
+        await page.evaluateHandle(() =>
+          document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {
+            (window as TestWindow).selectedIds = detail.selected.map((item) => item.id);
+          })
+        );
+
+        const getSelectedIds = async (): Promise<any> => page.evaluate(() => (window as TestWindow).selectedIds);
+
+        await item1.click();
+
+        expect(await getSelectedIds()).toEqual(["1"]);
+
+        await item2.click();
+
+        expect(await getSelectedIds()).toEqual(["1", "2"]);
+
+        await item2.click();
+
+        expect(await getSelectedIds()).toEqual(["1"]);
+
+        await item1.click();
+
+        expect(await getSelectedIds()).toEqual([]);
+      }));
+
     it("emits once when the tree item checkbox label is clicked", async () => {
       const page = await newE2EPage({
         html: html`<calcite-tree input-enabled selection-mode="ancestors">