fix(table-row): update selected property on calciteTabRowSelect event (#12015)

**Related Issue:** #11740 

## Summary

Callback function of `calciteTabRowSelect` event reflects the accurate
`selected` value of `table-row`.

Author: anveshmekala

packages/calcite-components/src/components/table-row/table-row.tsx

@@ -42,6 +42,10 @@ export class TableRow extends LitElement implements InteractiveComponent {
 
   private tableRowSlotEl = createRef<HTMLSlotElement>();
 
+  private userTriggered = false;
+
+  private _selected = false;
+
   // #endregion
 
   // #region Public Properties
@@ -93,7 +97,18 @@ export class TableRow extends LitElement implements InteractiveComponent {
   @property() scale: Scale;
 
   /** When `true`, the component is selected. */
-  @property({ reflect: true }) selected = false;
+  @property({ reflect: true })
+  get selected(): boolean {
+    return this._selected;
+  }
+
+  set selected(value: boolean) {
+    const oldValue = this._selected;
+    if (value !== oldValue) {
+      this._selected = value;
+      this.handleCellChanges();
+    }
+  }
 
   /** @private */
   @property() selectedRowCount: number;
@@ -142,7 +157,6 @@ export class TableRow extends LitElement implements InteractiveComponent {
     if (
       changes.has("bodyRowCount") ||
       changes.has("scale") ||
-      (changes.has("selected") && (this.hasUpdated || this.selected !== false)) ||
       changes.has("selectedRowCount") ||
       (changes.has("interactionMode") &&
         (this.hasUpdated || this.interactionMode !== "interactive"))
@@ -157,7 +171,11 @@ export class TableRow extends LitElement implements InteractiveComponent {
       this.handleDelayedCellChanges();
     }
 
-    if (changes.has("selected")) {
+    if (
+      changes.has("selected") &&
+      (this.hasUpdated || this.selected !== false) &&
+      !this.userTriggered
+    ) {
       this.calciteInternalTableRowSelect.emit();
     }
   }
@@ -327,18 +345,25 @@ export class TableRow extends LitElement implements InteractiveComponent {
     this.cellCount = cells?.length;
   }
 
-  private handleSelectionOfRow = (): void => {
+  private clickHandler = (): void => {
+    this.handleRowSelection();
+  };
+
+  private async handleRowSelection(): Promise<void> {
     if (this.rowType === "body" || (this.rowType === "head" && this.selectionMode === "multiple")) {
+      this.userTriggered = true;
+      this.selected = !this.selected;
+      await this.updateComplete;
       this.calciteTableRowSelect.emit();
     }
-  };
+  }
 
   private handleKeyboardSelection = (event: KeyboardEvent): void => {
     if (isActivationKey(event.key)) {
       if (event.key === " ") {
         event.preventDefault();
       }
-      this.handleSelectionOfRow();
+      this.handleRowSelection();
     }
   };
 
@@ -365,7 +390,7 @@ export class TableRow extends LitElement implements InteractiveComponent {
         alignment="center"
         bodyRowCount={this.bodyRowCount}
         key="selection-head"
-        onClick={this.handleSelectionOfRow}
+        onClick={this.clickHandler}
         onKeyDown={this.handleKeyboardSelection}
         parentRowAlignment={this.alignment}
         selectedRowCount={this.selectedRowCount}
@@ -377,7 +402,7 @@ export class TableRow extends LitElement implements InteractiveComponent {
       <calcite-table-cell
         alignment="center"
         key="selection-body"
-        onClick={this.handleSelectionOfRow}
+        onClick={this.clickHandler}
         onKeyDown={this.handleKeyboardSelection}
         parentRowAlignment={this.alignment}
         parentRowIsSelected={this.selected}

packages/calcite-components/src/components/table/table.e2e.ts

@@ -3,12 +3,17 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
 import { html } from "../../../support/formatting";
 import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests";
-import { createSelectedItemsAsserter, getFocusedElementProp } from "../../tests/utils/puppeteer";
+import {
+  createSelectedItemsAsserter,
+  getFocusedElementProp,
+  createEventTimePropValuesAsserter,
+} from "../../tests/utils/puppeteer";
 import { CSS } from "../table-header/resources";
 import { CSS as PAGINATION_CSS } from "../pagination/resources";
 import { CSS as CELL_CSS } from "../table-cell/resources";
 import type { TableHeader } from "../table-header/table-header";
 import type { TableCell } from "../table-cell/table-cell";
+import { TableRow } from "../table-row/table-row";
 import { SLOTS } from "./resources";
 
 describe("calcite-table", () => {
@@ -2739,4 +2744,58 @@ describe("keyboard navigation", () => {
       await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
   });
+
+  it("updates table-row's selected property correctly when calciteTabRowSelect event is emitted", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-table caption="Simple table" selection-mode="multiple">
+        <calcite-table-row slot="table-header">
+          <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+          <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+        </calcite-table-row>
+        <calcite-table-row id="row-1">
+          <calcite-table-cell>row1</calcite-table-cell>
+          <calcite-table-cell>row1</calcite-table-cell>
+        </calcite-table-row>
+        <calcite-table-row id="row-2">
+          <calcite-table-cell>row2</calcite-table-cell>
+          <calcite-table-cell>row2</calcite-table-cell>
+        </calcite-table-row>
+      </calcite-table>`,
+    );
+
+    async function selectRow(rowSelector: string): Promise<void> {
+      await page.$eval(rowSelector + " >>> calcite-table-cell:first-child", (el: TableCell["el"]) => {
+        el.click();
+      });
+      await page.waitForChanges();
+    }
+
+    const rowSelector = "calcite-table-row[id='row-1']";
+    const rowElement = await page.find(rowSelector);
+    expect(await rowElement.getProperty("selected")).toBe(false);
+
+    async function propValueAsserter(expectedPropValue: boolean): Promise<() => Promise<void>> {
+      return await createEventTimePropValuesAsserter<TableRow>(
+        page,
+        {
+          eventListenerSelector: "calcite-table",
+          selector: rowSelector,
+          eventName: "calciteTableRowSelect",
+          props: ["selected"],
+        },
+        async (propValues) => {
+          expect(propValues["selected"]).toBe(expectedPropValue);
+        },
+      );
+    }
+
+    const rowSelected = await propValueAsserter(true);
+    await selectRow(rowSelector);
+    await expect(rowSelected()).resolves.toBe(undefined);
+
+    const rowDeselected = await propValueAsserter(false);
+    await selectRow(rowSelector);
+    await expect(rowDeselected()).resolves.toBe(undefined);
+  });
 });

packages/calcite-components/src/components/table/table.tsx

@@ -211,9 +211,12 @@ export class Table extends LitElement {
   }
 
   private calciteInternalTableRowSelectListener(event: CustomEvent): void {
-    if (event.composedPath().includes(this.el)) {
-      this.updateSelectedItems(false);
+    if (!event.composedPath().includes(this.el)) {
+      return;
     }
+
+    this.updateSelectedItems(false);
+    event.stopPropagation();
   }
 
   private calciteInternalTableRowFocusEvent(event: CustomEvent<TableRowFocusEvent>): void {
@@ -343,7 +346,7 @@ export class Table extends LitElement {
     });
   }
 
-  private updateSelectedItems(emit?: boolean): void {
+  private async updateSelectedItems(emit?: boolean): Promise<void> {
     const selectedItems = this.bodyRows?.filter((el) => el.selected);
     this._selectedItems = selectedItems;
     this.selectedCount = selectedItems?.length;
@@ -368,8 +371,7 @@ export class Table extends LitElement {
       if (elToMatch?.rowType === "head") {
         el.selected = this.selectedCount !== this.bodyRows?.length;
       } else {
-        el.selected =
-          elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+        el.selected = this.selectionMode === "multiple" || elToMatch === el ? el.selected : false;
       }
     });
     this.updateSelectedItems(true);

packages/calcite-components/src/tests/utils/puppeteer.ts

@@ -550,6 +550,7 @@ export async function findAll(
  * This util helps assert on a component's state at the time of an event firing.
  *
  * This is needed due to how Puppeteer works asynchronously, so the state at event emit-time might not be the same as the state at the time of the assertion.
+ * When specified, the `eventListenerTarget` will be used to listen for the event instead of the component itself.
  *
  * Note: values returned can only be serializable values.
  *
@@ -559,25 +560,28 @@ export async function findAll(
  *   const page = await newE2EPage();
  *   await page.setContent(html`
  *     <calcite-combobox>
- *       <!-- ... -->
+ *      <calcite-combobox-item value="A">A</calcite-combobox-item>
+ *      <!-- ... -->
  *     </calcite-combobox>
  *   `);
  *   const propValueAsserter = await createEventTimePropValuesAsserter<Combobox>(
  *     page,
  *     {
- *       selector: "calcite-combobox",
- *       eventName: "calciteComboboxChange",
- *       props: ["value", "selectedItems"],
+ *       selector: "calcite-combobox-item",
+ *       eventName: "calciteComboboxItemChange",
+ *       props: ["selected"],
+ *       eventListenerSelector: "calcite-combobox",
  *     },
  *     async (propValues) => {
- *       expect(propValues.value).toBe("K");
- *       expect(propValues.selectedItems).toHaveLength(1);
+ *       expect(propValues.selected).toBe(true)
  *     },
  *   );
  *   const combobox = await page.find("calcite-combobox");
- *   await combobox.callMethod("setFocus");
- *   await combobox.press("K");
- *   await combobox.press("Enter");
+ *   await element.click();
+ *   await page.waitForChanges();
+ *   const comboboxItem = await page.find("calcite-combobox-item#A");
+ *   await comboboxItem.click();
+ *   await page.waitForChanges();
  *
  *   await expect(propValueAsserter()).resolves.toBe(undefined);
  * });
@@ -587,6 +591,7 @@ export async function findAll(
  * @param propValuesTarget.selector
  * @param propValuesTarget.eventName
  * @param propValuesTarget.props
+ * @param propValuesTarget.eventListenerSelector
  * @param onEvent
  */
 export async function createEventTimePropValuesAsserter<
@@ -598,18 +603,21 @@ export async function createEventTimePropValuesAsserter<
 >(
   page: E2EPage,
   propValuesTarget: {
-    selector: ComponentTag;
+    selector: ComponentTag | string;
     eventName: Events;
     props: Keys[];
+    eventListenerSelector?: string;
   },
   onEvent: (propValues: PropValues) => Promise<void>,
 ): Promise<() => Promise<void>> {
   // we set this up early to we capture state as soon as the event fires
+  const { selector, eventName, props, eventListenerSelector } = propValuesTarget;
   const callbackAfterEvent = page.$eval(
-    propValuesTarget.selector,
-    (element: El, eventName, props) => {
+    selector,
+    (element: El, eventName, props, eventListenerSelector) => {
+      const targetEl = eventListenerSelector ? document.querySelector(eventListenerSelector) : element;
       return new Promise<PropValues>((resolve) => {
-        element.addEventListener(
+        targetEl.addEventListener(
           eventName,
           () => {
             const propValues = Object.fromEntries(props.map((prop) => [prop, element[prop]]));
@@ -619,8 +627,9 @@ export async function createEventTimePropValuesAsserter<
         );
       });
     },
-    propValuesTarget.eventName,
-    propValuesTarget.props,
+    eventName,
+    props,
+    eventListenerSelector,
   );
 
   return () => callbackAfterEvent.then(onEvent);