chore: add null checks to setFocusOnTrigger (#1825)

* chore: add null checks to setFocusOnTrigger * chore: update package version
momentum-design · Nov 14, 2024 · dcf5eea · dcf5eea
1 parent 6c58267
commit dcf5eea
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.19",
+  "version": "2.14.20",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/components/menu-overlay/MenuOverlay.ts b/web-components/src/components/menu-overlay/MenuOverlay.ts
@@ -422,7 +422,7 @@ export namespace MenuOverlay {
     }
 
     private focusOnNestedTrigger(triggerElement?: HTMLElement) {
-      this.setFocusOnTrigger!(triggerElement);
+      this.setFocusOnTrigger?.(triggerElement);
     }
 
     handleOutsideOverlayClick = (event: MouseEvent) => {

diff --git a/web-components/src/mixins/FocusTrapMixin.ts b/web-components/src/mixins/FocusTrapMixin.ts
@@ -243,7 +243,7 @@ export const FocusTrapMixin = <T extends AnyConstructor<FocusClass & FocusTrapCl
       return false;
     }
 
-    private findElement(activeElement: HTMLElement) {
+    private findElement(activeElement: HTMLElement): number {
       return this.focusableElements.findIndex((element) => this.isEqualFocusNode(activeElement, element));
     }
 
@@ -306,23 +306,35 @@ export const FocusTrapMixin = <T extends AnyConstructor<FocusClass & FocusTrapCl
      * @param   triggerElement  The trigger element.
      * @returns void
      */
-    protected setFocusOnTrigger(triggerElement: HTMLElement) {
-      let deepNestedTriggerElement;
-      if (triggerElement.shadowRoot!) {
-        deepNestedTriggerElement = this.findFocusable(triggerElement.shadowRoot!, new Set());
-      } else if (this.isFocusable(triggerElement)) {
-        deepNestedTriggerElement = [triggerElement];
-      } else {
-        deepNestedTriggerElement = this.findFocusable(triggerElement, new Set());
+    protected setFocusOnTrigger(triggerElement?: HTMLElement) {
+      if (!triggerElement) {
+        return;
       }
-      if (deepNestedTriggerElement[0]) {
-        const focusableIndex = this.findElement(deepNestedTriggerElement[0] as HTMLElement);
+
+      const deepNestedTriggerElement = this.getDeepNestedTriggerElement(triggerElement);
+
+      if (deepNestedTriggerElement.length > 0) {
+        const focusableIndex = this.findElement(deepNestedTriggerElement[0]);
         this.focusTrapIndex = focusableIndex;
       }
     }
 
+    private getDeepNestedTriggerElement(triggerElement: HTMLElement): HTMLElement[] {
+      if (triggerElement.shadowRoot) {
+        return this.findFocusable(triggerElement.shadowRoot, new Set());
+      } else if (this.isFocusable(triggerElement)) {
+        return [triggerElement];
+      } else {
+        return this.findFocusable(triggerElement, new Set());
+      }
+    }
+
     protected setFocusableElements() {
-      this.focusableElements = this.findFocusable(this.shadowRoot!, new Set());
+      if (this.shadowRoot) {
+        this.focusableElements = this.findFocusable(this.shadowRoot, new Set());
+      } else {
+        console.warn("shadow root is not available");
+      }
     }
 
     protected async firstUpdated(changedProperties: PropertyValues) {