fix(list, list-item): Fix focus behavior when clicking on an item (#5901

)

**Related Issue:** #5899

## Summary

fix(list, list-item): Fix focus behavior when clicking on an item.

src/components/list-item/list-item.e2e.ts

@@ -100,4 +100,20 @@ describe("calcite-list-item", () => {
 
     expect(eventSpy).toHaveReceivedEventTimes(1);
   });
+
+  it("emits calciteInternalListItemActive on click", async () => {
+    const page = await newE2EPage({
+      html: `<calcite-list-item selection-mode="none" label="hello" description="world"></calcite-list-item>`
+    });
+
+    await page.waitForChanges();
+
+    const contentContainer = await page.find(`calcite-list-item >>> .${CSS.contentContainer}`);
+
+    const eventSpy = await page.spyOnEvent("calciteInternalListItemActive");
+
+    await contentContainer.click();
+
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+  });
 });

src/components/list-item/list-item.tsx

@@ -150,6 +150,12 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
    */
   @Event({ cancelable: false }) calciteInternalListItemSelect: EventEmitter<void>;
 
+  /**
+   *
+   * @internal
+   */
+  @Event({ cancelable: false }) calciteInternalListItemActive: EventEmitter<void>;
+
   /**
    *
    * @internal
@@ -250,7 +256,7 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
     }
 
     return (
-      <td class={CSS.selectionContainer} key="selection-container" onClick={this.toggleSelected}>
+      <td class={CSS.selectionContainer} key="selection-container" onClick={this.itemClicked}>
         <calcite-icon
           icon={
             selected
@@ -277,7 +283,7 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
         />
       </td>
     ) : parentListEl?.openable ? (
-      <td class={CSS.openContainer} key="open-container" onClick={this.toggleSelected}>
+      <td class={CSS.openContainer} key="open-container" onClick={this.itemClicked}>
         <calcite-icon icon={ICONS.blank} scale="s" />
       </td>
     ) : null;
@@ -380,7 +386,7 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
           [CSS.contentContainerHasCenterContent]: hasCenterContent
         }}
         key="content-container"
-        onClick={this.toggleSelected}
+        onClick={this.itemClicked}
         ref={(el) => (this.contentEl = el)}
         role="gridcell"
       >
@@ -509,6 +515,11 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
     this.open = !this.open;
   };
 
+  itemClicked = (): void => {
+    this.toggleSelected();
+    this.calciteInternalListItemActive.emit();
+  };
+
   toggleSelected = (): void => {
     if (this.disabled) {
       return;

src/components/list/list.e2e.ts

@@ -147,4 +147,35 @@ describe("calcite-list", () => {
     expect(await list.getProperty("filteredData")).toHaveLength(0);
     expect(await list.getProperty("filterText")).toBe("twoblah");
   });
+
+  it("should update active item on init and click", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-list selection-mode="none">
+        <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
+        <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
+        <calcite-list-item id="item-3" label="hello 3" description="world 3"></calcite-list-item>
+      </calcite-list>`
+    });
+
+    await page.waitForTimeout(debounceTimeout);
+    await page.waitForChanges();
+
+    const items = await page.findAll("calcite-list-item");
+
+    expect(await items[0].getProperty("active")).toBe(true);
+    expect(await items[1].getProperty("active")).toBe(false);
+    expect(await items[2].getProperty("active")).toBe(false);
+
+    const eventSpy = await page.spyOnEvent("calciteInternalListItemActive");
+
+    await items[1].click();
+
+    await page.waitForTimeout(debounceTimeout);
+    await page.waitForChanges();
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+
+    expect(await items[0].getProperty("active")).toBe(false);
+    expect(await items[1].getProperty("active")).toBe(true);
+    expect(await items[2].getProperty("active")).toBe(false);
+  });
 });

src/components/list/list.tsx

@@ -151,13 +151,22 @@ export class List implements InteractiveComponent, LoadableComponent {
     }
   }
 
+  @Listen("calciteInternalListItemActive")
+  handleCalciteListItemActive(event: CustomEvent): void {
+    const target = event.target as HTMLCalciteListItemElement;
+    const { listItems } = this;
+
+    listItems.forEach((listItem) => {
+      listItem.active = listItem === target;
+    });
+  }
+
   @Listen("calciteInternalListItemSelect")
   handleCalciteListItemSelect(event: CustomEvent): void {
     const target = event.target as HTMLCalciteListItemElement;
     const { listItems, selectionMode } = this;
 
     listItems.forEach((listItem) => {
-      listItem.active = listItem === target;
       if (selectionMode === "single") {
         listItem.selected = listItem === target;
       }