refactor: preserve context of 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,
@@ -35,7 +36,7 @@ export class AccordionItem extends LitElement {
 
   // #region Private Properties
 
-  private headerEl: HTMLDivElement;
+  private headerEl = createRef<HTMLDivElement>();
 
   // #endregion
 
@@ -103,7 +104,7 @@ export class AccordionItem extends LitElement {
   @method()
   async setFocus(): Promise<void> {
     await componentFocusable(this);
-    this.headerEl.focus();
+    this.headerEl.value?.focus();
   }
 
   // #endregion
@@ -198,10 +199,6 @@ export class AccordionItem extends LitElement {
     this.hasActionsEnd = slotChangeHasAssignedElement(event);
   }
 
-  private storeHeaderEl(el: HTMLDivElement): void {
-    this.headerEl = el;
-  }
-
   /** handle clicks on item header */
   private itemHeaderClickHandler(): void {
     this.emitRequestedItem();
@@ -291,7 +288,7 @@ export class AccordionItem extends LitElement {
             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

@@ -323,11 +323,12 @@ export class ActionMenu extends LitElement {
   }
 
   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/autocomplete/autocomplete.tsx

@@ -645,12 +645,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);
@@ -751,6 +750,10 @@ export class Autocomplete
   }
 
   private setFloatingEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.floatingEl = el;
     connectFloatingUI(this);
   }

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

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

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

@@ -274,11 +274,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

@@ -147,9 +147,10 @@ export class CardGroup extends LitElement implements InteractiveComponent {
   }
 
   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

@@ -271,7 +271,7 @@ export class Carousel extends LitElement implements InteractiveComponent {
   }
 
   private async directionWatcher(direction: "forward" | "backward" | "standby"): Promise<void> {
-    if (direction === "standby") {
+    if (direction === "standby" || !this.itemContainer) {
       return;
     }
 
@@ -551,14 +551,26 @@ export class Carousel extends LitElement implements InteractiveComponent {
   }
 
   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

@@ -239,7 +239,7 @@ export class Chip extends LitElement implements InteractiveComponent {
 
   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

@@ -365,12 +365,20 @@ export class ColorPickerHexInput extends LitElement {
     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

@@ -851,12 +851,20 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     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 {
@@ -1074,11 +1082,12 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
     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();
   }
@@ -1407,8 +1416,12 @@ export class ColorPicker extends LitElement implements InteractiveComponent {
         : 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

@@ -723,7 +723,9 @@ export class Combobox
   }
 
   private clearInputValue(): void {
-    this.textInput.value.value = "";
+    if (this.textInput.value) {
+      this.textInput.value.value = "";
+    }
     this.filterText = "";
   }
 
@@ -774,7 +776,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();
         }
@@ -813,7 +815,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);
@@ -1050,6 +1052,10 @@ export class Combobox
   }
 
   private setFloatingEl(el: HTMLDivElement): void {
+    if (!el) {
+      return;
+    }
+
     this.floatingEl = el;
     connectFloatingUI(this);
   }
@@ -1080,22 +1086,36 @@ export class Combobox
   }
 
   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());
     }
   }
@@ -356,7 +356,7 @@ export class DatePickerMonthHeader extends LitElement {
         target.disabled = false;
         await target.setFocus();
       } else {
-        this.yearInputEl.value.focus();
+        this.yearInputEl.value?.focus();
       }
     }
   }
@@ -520,7 +520,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}

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

@@ -647,9 +647,13 @@ export class DatePickerMonth extends LitElement {
           rangeEdge={dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined}
           rangeHover={isDateInRange && this.isRangeHover(date)}
           ref={(el) => {
+            if (!el) {
+              return;
+            }
+
             // when moving via keyboard, focus must be updated on active date
             if (ref && active && this.activeFocus) {
-              el?.setFocus();
+              el.setFocus();
             }
           }}
           scale={this.scale}

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

@@ -174,7 +174,7 @@ export class DropdownItem extends LitElement implements InteractiveComponent {
       case "Enter":
         this.emitRequestedItem();
         if (this.href) {
-          this.childLink.value.click();
+          this.childLink.value?.click();
         }
         event.preventDefault();
         break;