fix: use dispatchEvent('click') for MDC mat-checkbox interaction

MDC mat-checkbox has invisible label (zero-size) and input.click()
doesn't trigger Angular change detection. dispatchEvent('click')
on the mat-checkbox host element should trigger the Angular click
handler properly. Also keep fallback to single-delete in clearTable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: renemadsen

eform-client/playwright/e2e/plugins/items-planning-pn/ItemsPlanningPairingPage.ts

@@ -142,16 +142,16 @@ export class PairingRowObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairRowForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+      await this.pairRowForClick.dispatchEvent('click');
       await this.page.waitForTimeout(500);
       if ((await this.pairRow.locator('input').isChecked()) !== pair) {
-        await this.pairRowForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+        await this.pairRowForClick.dispatchEvent('click');
         await this.page.waitForTimeout(500);
       }
     } else {
       for (let i = 0; i < this.pairCheckboxesForClick.length; i++) {
         if ((await this.pairCheckboxes[i].locator('input').isChecked()) !== pair) {
-          await this.pairCheckboxesForClick[i].locator('input').evaluate((el: HTMLInputElement) => el.click());
+          await this.pairCheckboxesForClick[i].dispatchEvent('click');
           await this.page.waitForTimeout(500);
         }
       }
@@ -164,7 +164,7 @@ export class PairingRowObject {
     indexDeviceForPair: number,
     clickCancel = false
   ) {
-    await this.pairCheckboxesForClick[indexDeviceForPair].locator('input').evaluate((el: HTMLInputElement) => el.click());
+    await this.pairCheckboxesForClick[indexDeviceForPair].dispatchEvent('click');
     await this.page.waitForTimeout(1000);
     await this.pairingPage.savePairing(clickCancel);
   }
@@ -216,16 +216,16 @@ export class PairingColObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairColForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+      await this.pairColForClick.dispatchEvent('click');
       await this.page.waitForTimeout(500);
       if ((await this.pairCol.locator('input').isChecked()) !== pair) {
-        await this.pairColForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+        await this.pairColForClick.dispatchEvent('click');
         await this.page.waitForTimeout(500);
       }
     } else {
       for (let i = 0; i < this.pairCheckboxesForClick.length; i++) {
         if ((await this.pairCheckboxes[i].locator('input').isChecked()) !== pair) {
-          await this.pairCheckboxesForClick[i].locator('input').evaluate((el: HTMLInputElement) => el.click());
+          await this.pairCheckboxesForClick[i].dispatchEvent('click');
           await this.page.waitForTimeout(500);
         }
       }

eform-client/playwright/e2e/plugins/items-planning-pn/ItemsPlanningPlanningPage.ts

@@ -206,26 +206,9 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
     if (!pickOne) {
       const isChecked = await this.selectAllPlanningsCheckbox.locator('input').isChecked().catch(() => false);
       if (isChecked !== valueCheckbox) {
-        // Try multiple click strategies for MDC mat-checkbox
-        const checkbox = this.selectAllPlanningsCheckbox;
-        // Strategy: use Playwright's click with force on the label element
-        const label = checkbox.locator('label');
-        if ((await label.count()) > 0) {
-          await label.click({ force: true });
-        } else {
-          await checkbox.click({ force: true });
-        }
-        await this.page.waitForTimeout(500);
-        // Verify the click worked, if not try evaluate
-        const nowChecked = await checkbox.locator('input').isChecked().catch(() => false);
-        if (nowChecked === isChecked) {
-          // Click didn't register, try JS click on the native control
-          await checkbox.evaluate((el: HTMLElement) => {
-            const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
-            if (input) { input.click(); }
-          });
-          await this.page.waitForTimeout(500);
-        }
+        // MDC mat-checkbox label is invisible (zero-size). Dispatch click on the host element.
+        await this.selectAllPlanningsCheckbox.dispatchEvent('click');
+        await this.page.waitForTimeout(1000);
       }
     } else {
       const plannings = await this.getAllPlannings(0, false);
@@ -465,21 +448,8 @@ export class PlanningRowObject {
   async clickOnCheckboxForMultipleDelete(valueCheckbox = true) {
     const isChecked = await this.checkboxDelete.locator('input').isChecked().catch(() => false);
     if (isChecked !== valueCheckbox) {
-      const label = this.checkboxDelete.locator('label');
-      if ((await label.count()) > 0) {
-        await label.click({ force: true });
-      } else {
-        await this.checkboxDelete.click({ force: true });
-      }
+      await this.checkboxDelete.dispatchEvent('click');
       await this.page.waitForTimeout(500);
-      const nowChecked = await this.checkboxDelete.locator('input').isChecked().catch(() => false);
-      if (nowChecked === isChecked) {
-        await this.checkboxDelete.evaluate((el: HTMLElement) => {
-          const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
-          if (input) { input.click(); }
-        });
-        await this.page.waitForTimeout(500);
-      }
     }
   }