FLOW-1029 checkbox bug

Author: vikas-cldcvr

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -162,6 +162,9 @@ export class FTableSchema extends FRoot {
 	@query("f-div.load-more")
 	loadMoreButton?: FDiv;
 
+	@query("#f-table-element")
+	tableElement?: FTable;
+
 	nextEmitted = false;
 
 	get max() {
@@ -405,6 +408,7 @@ export class FTableSchema extends FRoot {
 						: nothing}
 				</slot>
 				<f-table
+					id="f-table-element"
 					.variant=${this.variant}
 					.size=${this.size}
 					.selectable=${this.selectable}
@@ -419,9 +423,7 @@ export class FTableSchema extends FRoot {
 			</div>
 		`;
 	}
-	protected async updated(
-		changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-	): Promise<void> {
+	protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.updated(changedProperties);
 
 		this.onscroll = () => {
@@ -440,15 +442,19 @@ export class FTableSchema extends FRoot {
 				});
 			}
 		};
-		await this.updateComplete;
-		if (
-			this.scrollHeight === this.offsetHeight &&
-			this.filteredRows.length < this.searchedRows.length
-		) {
-			this.loadMoreButton?.style.removeProperty("display");
-		} else if (this.loadMoreButton) {
-			this.loadMoreButton.style.display = "none";
-		}
+		void this.updateComplete.then(async () => {
+			if (
+				this.scrollHeight === this.offsetHeight &&
+				this.filteredRows.length < this.searchedRows.length
+			) {
+				this.loadMoreButton?.style.removeProperty("display");
+			} else if (this.loadMoreButton) {
+				this.loadMoreButton.style.display = "none";
+			}
+			if (this.tableElement) {
+				await this.tableElement.updateHeaderSelectionCheckboxState();
+			}
+		});
 	}
 
 	handleHeaderInput(event: CustomEvent<boolean>, headerCell: FTableSchemaHeaderCell) {

packages/flow-table/src/components/f-tcell/f-tcell.ts

@@ -125,13 +125,15 @@ export class FTcell extends FRoot {
 				${this.selectable === "multiple"
 					? html`<f-checkbox
 							?disabled=${this.isDisabled}
+							@click=${(event: PointerEvent) => event.stopPropagation()}
 							@input=${this.handleSelection}
 					  ></f-checkbox>`
 					: nothing}
 				${this.selectable === "single"
 					? html`<f-radio
 							?disabled=${this.isDisabled}
 							@input=${this.handleSelection}
+							@click=${(event: PointerEvent) => event.stopPropagation()}
 							class="cell-radio"
 					  ></f-radio>`
 					: nothing}

stories/flow-table/f-table-schema.stories.ts

@@ -3,6 +3,7 @@ import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
 import getFakeUsers, { popoverRef } from "../utils/mock-users-data";
 import { createRef, ref } from "lit/directives/ref.js";
 import downloadFile from "./donwload-file";
+import { FTableSchema } from "@cldcvr/flow-table/src/components/f-table-schema/f-table-schema";
 
 export default {
 	title: "@cldcvr/flow-table/f-table-schema",
@@ -456,6 +457,16 @@ export const HeaderInput = {
 	render: () => {
 		const data = getFakeUsers(10, 5);
 		const fieldRef = createRef();
+		const tableRef = createRef<FTableSchema>();
+
+		const handleToggle = (_event: PointerEvent) => {
+			data.rows.forEach(row => {
+				row.selected = !row.selected;
+			});
+			if (tableRef.value) {
+				tableRef.value.data = { ...data };
+			}
+		};
 
 		const handleEvent = (event: CustomEvent) => {
 			if (fieldRef.value) {
@@ -467,7 +478,13 @@ export const HeaderInput = {
 				<f-text
 					>'header-input' event emitted whenever checkbox is checked/unchecked in header</f-text
 				>
-				<f-table-schema .data=${data} selectable="multiple" @header-input=${handleEvent}>
+				<f-button label="toggle" @click=${handleToggle}></f-button>
+				<f-table-schema
+					${ref(tableRef)}
+					.data=${data}
+					selectable="multiple"
+					@header-input=${handleEvent}
+				>
 				</f-table-schema>
 				<f-divider></f-divider>
 			</f-div>