From 8ad07cec8282b07f54996d60c30fa3d494662687 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 14 Jan 2025 15:55:50 -0800
Subject: [PATCH] fix(list-item): refine visual focus behavior around content
 when clicking with the mouse

---
 .../src/components/list-item/list-item.tsx                  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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 552e1c9bf19..7711c325f74 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -577,6 +577,10 @@ export class ListItem
     }
 
     this.toggleSelected(event.shiftKey);
+
+    if (this.active && event.currentTarget === this.contentEl.value) {
+      this.containerEl.value.focus();
+    }
   }
 
   private async toggleSelected(shiftKey: boolean): Promise<void> {
@@ -970,7 +974,7 @@ export class ListItem
       <div
         ariaLabel={label}
         class={{
-          [CSS.gridCell]: true,
+          [CSS.gridCell]: this.el.shadowRoot.activeElement === this.contentEl.value && true,
           [CSS.contentContainer]: true,
           [CSS.contentContainerUnavailable]: unavailable,
           [CSS.contentContainerSelectable]: selectionMode !== "none",