diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 961b39793f7..6de32b098f3 100644 --- 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); }; }