From 42c760a0b3980b8240e49fefc65632b78e230a4b Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 19 Jul 2021 15:14:41 -0700
Subject: [PATCH] fix(combobox): Fix selection logic and prevent events from
 causing stack error (#2493)

* fix(combobox): Fix selection logic and prevent events from causing stack error. #
---
 src/components/calcite-button/calcite-button.e2e.ts |  7 ++++---
 .../calcite-combobox/calcite-combobox.tsx           | 13 ++++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/calcite-button/calcite-button.e2e.ts b/src/components/calcite-button/calcite-button.e2e.ts
index 9896c993486..50764dd0852 100644
--- a/src/components/calcite-button/calcite-button.e2e.ts
+++ b/src/components/calcite-button/calcite-button.e2e.ts
@@ -417,16 +417,17 @@ describe("calcite-button", () => {
         <calcite-button loading id="two-icons" icon-start='arrow-right' icon-end='download'></calcite-button>
         <calcite-button loading id="icons-and-text" icon-start='arrow-right' icon-end='download'>Go!</calcite-button>
       `);
+      await page.waitForChanges();
       const button1 = await page.find("calcite-button[id='one-icon']");
       const button2 = await page.find("calcite-button[id='two-icons']");
       const button3 = await page.find("calcite-button[id='icons-and-text']");
+      const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`);
+      const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`);
+      const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`);
       await button1.setProperty("loading", false);
       await button2.setProperty("loading", false);
       await button3.setProperty("loading", false);
       await page.waitForChanges();
-      const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`);
-      const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`);
-      const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`);
       expect(loader1).toHaveClass(CSS.loadingOut);
       expect(loader2).toHaveClass(CSS.loadingOut);
       expect(loader3).toHaveClass(CSS.loadingOut);
diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
index 9225722d58f..68cc088504b 100644
--- a/src/components/calcite-combobox/calcite-combobox.tsx
+++ b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -130,6 +130,10 @@ export class CalciteCombobox {
 
   @Listen("calciteComboboxItemChange")
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void {
+    if (this.ignoreSelectedEventsFlag) {
+      return;
+    }
+
     const target = event.target as HTMLCalciteComboboxItemElement;
     this.toggleSelection(target, target.selected);
   }
@@ -349,6 +353,8 @@ export class CalciteCombobox {
 
   private listContainerEl: HTMLDivElement;
 
+  private ignoreSelectedEventsFlag = false;
+
   private activeTransitionProp = "opacity";
 
   // --------------------------------------------------------------------------
@@ -555,9 +561,8 @@ export class CalciteCombobox {
       return;
     }
 
-    item.selected = value;
-
     if (this.isMulti()) {
+      item.selected = value;
       this.updateAncestors(item);
       this.selectedItems = this.getSelectedItems();
       this.emitCalciteLookupChange();
@@ -565,7 +570,9 @@ export class CalciteCombobox {
       this.textInput.focus();
       this.filterItems("");
     } else {
-      this.items.filter((el) => el !== item).forEach((el) => (el.selected = false));
+      this.ignoreSelectedEventsFlag = true;
+      this.items.forEach((el) => (el.selected = el === item));
+      this.ignoreSelectedEventsFlag = false;
       this.selectedItem = item;
       this.textInput.value = item.textLabel;
       this.active = false;