From 5ca64f1f920f869053fee24ed2c982f64a0bbb5b Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Wed, 23 Aug 2023 09:47:33 -0700
Subject: [PATCH] fix(chip-group): Add existence checks (#7586)

**Related Issue:** #7585

## Summary
Adds check for existence with optional chaining.
---
 .../src/components/chip-group/chip-group.tsx       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
index ad92c8a30cf..902c594e99e 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.tsx
+++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -125,7 +125,7 @@ export class ChipGroup implements InteractiveComponent {
   @Listen("calciteInternalChipKeyEvent")
   calciteInternalChipKeyEventListener(event: CustomEvent): void {
     if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
+      const interactiveItems = this.items?.filter((el) => !el.disabled);
       switch (event.detail.key) {
         case "ArrowRight":
           focusElementInGroup(interactiveItems, event.detail.target, "next");
@@ -146,16 +146,16 @@ export class ChipGroup implements InteractiveComponent {
   @Listen("calciteChipClose")
   calciteChipCloseListener(event: CustomEvent): void {
     const item = event.target as HTMLCalciteChipElement;
-    if (this.items.includes(item)) {
-      if (this.items.indexOf(item) > 0) {
+    if (this.items?.includes(item)) {
+      if (this.items?.indexOf(item) > 0) {
         focusElementInGroup(this.items, item as HTMLCalciteChipElement, "previous");
-      } else if (this.items.indexOf(item) === 0) {
+      } else if (this.items?.indexOf(item) === 0) {
         focusElementInGroup(this.items, item as HTMLCalciteChipElement, "next");
       } else {
         focusElementInGroup(this.items, item as HTMLCalciteChipElement, "first");
       }
     }
-    this.items = this.items.filter((el) => el !== item);
+    this.items = this.items?.filter((el) => el !== item);
   }
 
   @Listen("calciteChipSelect")
@@ -205,7 +205,7 @@ export class ChipGroup implements InteractiveComponent {
 
   private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteChipElement): void => {
     if (elToMatch) {
-      this.items.forEach((el) => {
+      this.items?.forEach((el) => {
         const matchingEl = elToMatch === el;
         switch (this.selectionMode) {
           case "multiple":
@@ -225,7 +225,7 @@ export class ChipGroup implements InteractiveComponent {
       });
     }
 
-    this.selectedItems = this.items.filter((el) => el.selected);
+    this.selectedItems = this.items?.filter((el) => el.selected);
 
     if (emit) {
       this.calciteChipGroupSelect.emit();