fix(combobox): Fix selection logic and prevent events from causing st…

…ack error (#2493) * fix(combobox): Fix selection logic and prevent events from causing stack error. #
Esri · Jul 19, 2021 · 42c760a · 42c760a
1 parent cd3a1ca
commit 42c760a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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,17 +561,18 @@ export class CalciteCombobox {
       return;
     }
 
-    item.selected = value;
-
     if (this.isMulti()) {
+      item.selected = value;
       this.updateAncestors(item);
       this.selectedItems = this.getSelectedItems();
       this.emitCalciteLookupChange();
       this.resetText();
       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;