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();