fix(list-item): focus on the first focusable element within the compo…

…nent when using arrow keys. #7974
Esri · Nov 29, 2023 · ef17a85 · ef17a85
1 parent 7aeecd5
commit ef17a85
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -12,7 +12,12 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
+import {
+  focusFirstTabbable,
+  getElementDir,
+  slotChangeHasAssignedElement,
+  toAriaBoolean,
+} from "../../utils/dom";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -344,7 +349,7 @@ export class ListItem
     const focusIndex = focusMap.get(parentListEl);
 
     if (typeof focusIndex === "number") {
-      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+      const cells = [actionsStartEl, contentEl, actionsEndEl].filter((el) => el && !el.hidden);
       if (cells[focusIndex]) {
         this.focusCell(cells[focusIndex]);
       } else {
@@ -737,7 +742,7 @@ export class ListItem
     const composedPath = event.composedPath();
     const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
 
-    const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+    const cells = [actionsStartEl, contentEl, actionsEndEl].filter((el) => el && !el.hidden);
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
 
     if (
@@ -790,16 +795,18 @@ export class ListItem
       focusMap.set(parentListEl, null);
     }
 
-    [actionsStartEl, contentEl, actionsEndEl].filter(Boolean).forEach((tableCell, cellIndex) => {
-      const tabIndexAttr = "tabindex";
-      if (tableCell === focusEl) {
-        tableCell.setAttribute(tabIndexAttr, "0");
-        saveFocusIndex && focusMap.set(parentListEl, cellIndex);
-      } else {
-        tableCell.removeAttribute(tabIndexAttr);
-      }
-    });
+    [actionsStartEl, contentEl, actionsEndEl]
+      .filter((el) => el && !el.hidden)
+      .forEach((tableCell, cellIndex) => {
+        const tabIndexAttr = "tabindex";
+        if (tableCell === focusEl) {
+          tableCell.setAttribute(tabIndexAttr, "0");
+          saveFocusIndex && focusMap.set(parentListEl, cellIndex);
+        } else {
+          tableCell.removeAttribute(tabIndexAttr);
+        }
+      });
 
-    focusEl?.focus();
+    focusFirstTabbable(focusEl);
   };
 }