fix(list): only focus on row when clicking a list item (#11310)

**Related Issue:** #11078 ## Summary - no longer focuses on cells when a cell is focused via click - only a row or cell can be focusable via tabindex at a time - update tests
Esri · Jan 15, 2025 · 8dcde2e · 8dcde2e
1 parent 68f0723
commit 8dcde2e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 27 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
@@ -474,22 +474,6 @@ export class ListItem
     this.calciteInternalListItemActive.emit();
   }
 
-  private focusCellHandle(): void {
-    this.handleCellFocusIn(this.handleGridEl.value);
-  }
-
-  private focusCellActionsStart(): void {
-    this.handleCellFocusIn(this.actionsStartEl.value);
-  }
-
-  private focusCellContent(): void {
-    this.handleCellFocusIn(this.contentEl.value);
-  }
-
-  private focusCellActionsEnd(): void {
-    this.handleCellFocusIn(this.actionsEndEl.value);
-  }
-
   private emitCalciteInternalListItemToggle(): void {
     this.calciteInternalListItemToggle.emit();
   }
@@ -670,10 +654,6 @@ export class ListItem
     this.focusCell(null);
   }
 
-  private handleCellFocusIn(focusEl: HTMLDivElement): void {
-    this.setFocusCell(focusEl, getFirstTabbable(focusEl), true);
-  }
-
   private setFocusCell(
     focusEl: HTMLDivElement | null,
     focusedEl: HTMLElement,
@@ -688,15 +668,20 @@ export class ListItem
     const gridCells = this.getGridCells();
 
     gridCells.forEach((tableCell) => {
-      tableCell.tabIndex = -1;
+      tableCell.removeAttribute("tabindex");
       tableCell.removeAttribute(activeCellTestAttribute);
     });
 
     if (!focusEl) {
       return;
     }
 
-    focusEl.tabIndex = focusEl === focusedEl ? 0 : -1;
+    if (focusEl === focusedEl) {
+      focusEl.tabIndex = 0;
+    } else {
+      focusEl.removeAttribute("tabindex");
+    }
+
     focusEl.setAttribute(activeCellTestAttribute, "");
 
     if (saveFocusIndex) {
@@ -755,7 +740,6 @@ export class ListItem
         ariaLabel={label}
         class={{ [CSS.dragContainer]: true, [CSS.gridCell]: true }}
         key="drag-handle-container"
-        onFocusIn={this.focusCellHandle}
         ref={this.handleGridEl}
         role="gridcell"
       >
@@ -820,7 +804,6 @@ export class ListItem
         class={{ [CSS.actionsStart]: true, [CSS.gridCell]: true }}
         hidden={!hasActionsStart}
         key="actions-start-container"
-        onFocusIn={this.focusCellActionsStart}
         ref={this.actionsStartEl}
         role="gridcell"
       >
@@ -837,7 +820,6 @@ export class ListItem
         class={{ [CSS.actionsEnd]: true, [CSS.gridCell]: true }}
         hidden={!(hasActionsEnd || closable)}
         key="actions-end-container"
-        onFocusIn={this.focusCellActionsEnd}
         ref={this.actionsEndEl}
         role="gridcell"
       >
@@ -978,7 +960,6 @@ export class ListItem
         }}
         key="content-container"
         onClick={this.handleItemClick}
-        onFocusIn={this.focusCellContent}
         ref={this.contentEl}
         role="gridcell"
       >

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -427,6 +427,7 @@ describe("calcite-list", () => {
     await firstItem.callMethod("setFocus");
     await page.waitForChanges();
 
+    await page.keyboard.press("Tab");
     await page.keyboard.press("Tab");
     await page.keyboard.press("Tab");
 
@@ -1469,7 +1470,7 @@ describe("calcite-list", () => {
       expect(await items[0].getProperty("active")).toBe(false);
       expect(await items[1].getProperty("active")).toBe(true);
       expect(await items[2].getProperty("active")).toBe(false);
-      expect(secondHandleCell.getAttribute(activeCellTestAttribute)).toBe("");
+      expect(secondHandleCell.getAttribute(activeCellTestAttribute)).toBe(null);
     });
   });