fix: improve ref handling logic

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
+import { createRef } from "lit-html/directives/ref.js";
 import {
   closestElementCrossShadowBoundary,
   getElementDir,
@@ -40,7 +41,7 @@ export class AccordionItem extends LitElement implements LoadableComponent {
 
   // #region Private Properties
 
-  private headerEl: HTMLDivElement;
+  private headerEl = createRef<HTMLDivElement>();
 
   // #endregion
 
@@ -108,7 +109,7 @@ export class AccordionItem extends LitElement implements LoadableComponent {
   @method()
   async setFocus(): Promise<void> {
     await componentFocusable(this);
-    this.headerEl.focus();
+    this.headerEl.value?.focus();
   }
 
   // #endregion
@@ -211,10 +212,6 @@ export class AccordionItem extends LitElement implements LoadableComponent {
     this.hasActionsEnd = slotChangeHasAssignedElement(event);
   }
 
-  private storeHeaderEl(el: HTMLDivElement): void {
-    this.headerEl = el;
-  }
-
   /** handle clicks on item header */
   private itemHeaderClickHandler(): void {
     this.emitRequestedItem();
@@ -304,7 +301,7 @@ export class AccordionItem extends LitElement implements LoadableComponent {
             class={CSS.headerContent}
             id={IDS.sectionToggle}
             onClick={this.itemHeaderClickHandler}
-            ref={this.storeHeaderEl}
+            ref={this.headerEl}
             role="button"
             tabIndex="0"
           >

packages/calcite-components/src/components/action-menu/action-menu.tsx

@@ -336,11 +336,12 @@ export class ActionMenu extends LitElement implements LoadableComponent {
   }
 
   private setDefaultMenuButtonEl(el: Action["el"]): void {
-    this.defaultMenuButtonEl = el;
-
-    if (el) {
-      this.connectMenuButtonEl();
+    if (!el) {
+      return;
     }
+
+    this.defaultMenuButtonEl = el;
+    this.connectMenuButtonEl();
   }
 
   private setPopoverEl(el: Popover["el"]): void {

packages/calcite-components/src/components/alert/alert.tsx

@@ -339,6 +339,10 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
   }
 
   private setTransitionEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.transitionEl = el;
   }
 

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

@@ -653,12 +653,11 @@ export class Autocomplete
   }
 
   private setReferenceEl(el: Input["el"]): void {
-    this.referenceEl = el;
-
     if (!el) {
       return;
     }
 
+    this.referenceEl = el;
     this.resizeObserver?.observe(el);
 
     connectFloatingUI(this);
@@ -759,11 +758,19 @@ export class Autocomplete
   }
 
   private setFloatingEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.floatingEl = el;
     connectFloatingUI(this);
   }
 
   private setTransitionEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.transitionEl = el;
   }
 

packages/calcite-components/src/components/block/block.tsx

@@ -300,6 +300,10 @@ export class Block
   }
 
   private setSortHandleEl(el: SortHandle["el"]): void {
+    if (!el) {
+      return;
+    }
+
     this.sortHandleEl = el;
     this.sortHandleOpenHandler();
   }

packages/calcite-components/src/components/button/button.tsx

@@ -281,11 +281,12 @@ export class Button
   }
 
   private setChildEl(el: HTMLElement): void {
-    this.childEl = el;
-
-    if (el) {
-      this.resizeObserver?.observe(el);
+    if (!el) {
+      return;
     }
+
+    this.childEl = el;
+    this.resizeObserver?.observe(el);
   }
 
   // #endregion

packages/calcite-components/src/components/card-group/card-group.tsx

@@ -158,9 +158,10 @@ export class CardGroup extends LitElement implements InteractiveComponent, Loada
   }
 
   private updateSlottedItems(target: HTMLSlotElement): void {
-    this.items = target
-      .assignedElements({ flatten: true })
-      .filter((el): el is Card["el"] => el?.matches("calcite-card"));
+    this.items =
+      target
+        ?.assignedElements({ flatten: true })
+        .filter((el): el is Card["el"] => el?.matches("calcite-card")) || [];
   }
 
   private updateSelectedItems(): void {

packages/calcite-components/src/components/carousel/carousel.tsx

@@ -281,7 +281,7 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
   }
 
   private async directionWatcher(direction: "forward" | "backward" | "standby"): Promise<void> {
-    if (direction === "standby") {
+    if (direction === "standby" || !this.itemContainer) {
       return;
     }
 
@@ -561,14 +561,26 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
   }
 
   private storeTabListRef(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.tabList = el;
   }
 
   private storeContainerRef(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.container = el;
   }
 
   private storeItemContainerRef(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.itemContainer = el;
   }
 

packages/calcite-components/src/components/chip/chip.tsx

@@ -246,7 +246,7 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
 
   private clickHandler(): void {
     if (!this.interactive && this.closable) {
-      this.closeButtonEl.value.focus();
+      this.closeButtonEl.value?.focus();
     }
   }
 

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

@@ -378,12 +378,20 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
     this.value = oldValue;
   }
 
-  private storeHexInputRef(node: InputText["el"]): void {
-    this.hexInputNode = node;
+  private storeHexInputRef(el: InputText["el"]): void {
+    if (!el) {
+      return;
+    }
+
+    this.hexInputNode = el;
   }
 
-  private storeOpacityInputRef(node: InputNumber["el"]): void {
-    this.opacityInputNode = node;
+  private storeOpacityInputRef(el: InputNumber["el"]): void {
+    if (!el) {
+      return;
+    }
+
+    this.opacityInputNode = el;
   }
 
   private formatHexForInternalInput(hex: string): string {

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -858,12 +858,20 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
     this.focusScope(scopeNode);
   }
 
-  private storeColorFieldScope(node: HTMLDivElement): void {
-    this.colorFieldScopeNode = node;
+  private storeColorFieldScope(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
+    this.colorFieldScopeNode = el;
   }
 
-  private storeHueScope(node: HTMLDivElement): void {
-    this.hueScopeNode = node;
+  private storeHueScope(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
+    this.hueScopeNode = el;
   }
 
   private handleKeyDown(event: KeyboardEvent): void {
@@ -1078,11 +1086,12 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
     context.scale(devicePixelRatio, devicePixelRatio);
   }
 
-  private initColorField(canvas?: HTMLCanvasElement): void {
-    if (!canvas) {
+  private initColorField(el?: HTMLCanvasElement): void {
+    if (!el) {
       return;
     }
-    this.colorFieldRenderingContext = canvas.getContext("2d");
+
+    this.colorFieldRenderingContext = el.getContext("2d");
     this.updateCanvasSize("color-field");
     this.drawColorControls();
   }
@@ -1411,8 +1420,12 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
         : remap(x, 0, width, width - radius * 2, width - radius);
   }
 
-  private storeOpacityScope(node: HTMLDivElement): void {
-    this.opacityScopeNode = node;
+  private storeOpacityScope(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
+    this.opacityScopeNode = el;
   }
 
   private handleOpacityScopeKeyDown(event: KeyboardEvent): void {

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -735,7 +735,9 @@ export class Combobox
   }
 
   private clearInputValue(): void {
-    this.textInput.value.value = "";
+    if (this.textInput.value) {
+      this.textInput.value.value = "";
+    }
     this.filterText = "";
   }
 
@@ -786,7 +788,7 @@ export class Combobox
         }
         break;
       case "ArrowLeft":
-        if (this.activeChipIndex !== -1 || this.textInput.value.selectionStart === 0) {
+        if (this.activeChipIndex !== -1 || this.textInput.value?.selectionStart === 0) {
           this.previousChip();
           event.preventDefault();
         }
@@ -825,7 +827,7 @@ export class Combobox
         }
         break;
       case " ":
-        if (!this.textInput.value.value && !event.defaultPrevented) {
+        if (!this.textInput.value?.value && !event.defaultPrevented) {
           if (!this.open) {
             this.open = true;
             this.shiftActiveItemIndex(1);
@@ -1062,6 +1064,10 @@ export class Combobox
   }
 
   private setFloatingEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.floatingEl = el;
     connectFloatingUI(this);
   }
@@ -1082,30 +1088,46 @@ export class Combobox
   }
 
   private setContainerEl(el: HTMLDivElement): void {
-    if (el) {
-      this.resizeObserver?.observe(el);
+    if (!el) {
+      return;
     }
+
+    this.resizeObserver?.observe(el);
     this.listContainerEl = el;
     this.transitionEl = el;
   }
 
   private setChipContainerEl(el: HTMLDivElement): void {
-    if (el) {
-      this.resizeObserver?.observe(el);
+    if (!el) {
+      return;
     }
+
+    this.resizeObserver?.observe(el);
     this.chipContainerEl = el;
   }
 
   private setReferenceEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.referenceEl = el;
     connectFloatingUI(this);
   }
 
   private setAllSelectedIndicatorChipEl(el: Chip["el"]): void {
+    if (!el) {
+      return;
+    }
+
     this.allSelectedIndicatorChipEl = el;
   }
 
   private setSelectedIndicatorChipEl(el: Chip["el"]): void {
+    if (!el) {
+      return;
+    }
+
     this.selectedIndicatorChipEl = el;
   }
 

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -295,7 +295,7 @@ export class DatePickerMonthHeader extends LitElement {
       this.calciteInternalDatePickerMonthHeaderSelectChange.emit(inRangeDate);
     }
 
-    if (commit) {
+    if (commit && yearInputEl.value) {
       yearInputEl.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear());
     }
   }
@@ -353,7 +353,7 @@ export class DatePickerMonthHeader extends LitElement {
       if (!this.position) {
         await (isDirectionLeft ? this.nextMonthAction.setFocus() : this.prevMonthAction.setFocus());
       } else {
-        this.yearInputEl.value.focus();
+        this.yearInputEl.value?.focus();
       }
     }
   }
@@ -517,7 +517,13 @@ export class DatePickerMonthHeader extends LitElement {
         iconFlipRtl={true}
         onClick={isDirectionRight ? this.nextMonthClick : this.prevMonthClick}
         onKeyDown={isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown}
-        ref={(el) => (isDirectionRight ? (this.nextMonthAction = el) : (this.prevMonthAction = el))}
+        ref={(el) => {
+          if (!el) {
+            return;
+          }
+
+          return isDirectionRight ? (this.nextMonthAction = el) : (this.prevMonthAction = el);
+        }}
         role="button"
         scale={this.scale === "l" ? "l" : "m"}
         text={isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth}