fix: use input.click() for mat-checkbox interaction in Playwright

Angular Material MDC checkboxes listen for click events on the native
input element via _handleInputClick. Using evaluate to call input.click()
bypasses visibility constraints while still triggering Angular's change
detection properly.

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,25 @@ export class PairingRowObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairRowForClick.dispatchEvent('click');
+      await this.pairRowForClick.evaluate((el: HTMLElement) => {
+        const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        if (input) input.click();
+      });
       await this.page.waitForTimeout(500);
       if ((await this.pairRow.locator('input').isChecked()) !== pair) {
-        await this.pairRowForClick.dispatchEvent('click');
+        await this.pairRowForClick.evaluate((el: HTMLElement) => {
+          const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+          if (input) input.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].dispatchEvent('click');
+          await this.pairCheckboxesForClick[i].evaluate((el: HTMLElement) => {
+            const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+            if (input) input.click();
+          });
           await this.page.waitForTimeout(500);
         }
       }
@@ -164,7 +173,10 @@ export class PairingRowObject {
     indexDeviceForPair: number,
     clickCancel = false
   ) {
-    await this.pairCheckboxesForClick[indexDeviceForPair].dispatchEvent('click');
+    await this.pairCheckboxesForClick[indexDeviceForPair].evaluate((el: HTMLElement) => {
+      const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+      if (input) input.click();
+    });
     await this.page.waitForTimeout(1000);
     await this.pairingPage.savePairing(clickCancel);
   }
@@ -216,16 +228,25 @@ export class PairingColObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairColForClick.dispatchEvent('click');
+      await this.pairColForClick.evaluate((el: HTMLElement) => {
+        const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        if (input) input.click();
+      });
       await this.page.waitForTimeout(500);
       if ((await this.pairCol.locator('input').isChecked()) !== pair) {
-        await this.pairColForClick.dispatchEvent('click');
+        await this.pairColForClick.evaluate((el: HTMLElement) => {
+          const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+          if (input) input.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].dispatchEvent('click');
+          await this.pairCheckboxesForClick[i].evaluate((el: HTMLElement) => {
+            const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+            if (input) input.click();
+          });
           await this.page.waitForTimeout(500);
         }
       }

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

@@ -211,18 +211,11 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
 
   async selectAllPlanningsForDelete(valueCheckbox = true, pickOne = false) {
     if (!pickOne) {
-      // Click the mdc-checkbox div which has visible dimensions
-      const mdcCheckbox = this.selectAllPlanningsCheckbox.locator('.mdc-checkbox');
-      await mdcCheckbox.waitFor({ state: 'attached', timeout: 10000 });
-      const box = await mdcCheckbox.boundingBox();
-      if (box && box.width > 0 && box.height > 0) {
-        await this.page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
-      } else {
-        // Fallback: click the mat-checkbox via evaluate
-        await this.selectAllPlanningsCheckbox.evaluate((el: HTMLElement) => {
-          el.click();
-        });
-      }
+      // Click the native input inside mat-checkbox — triggers Angular Material's _handleInputClick
+      await this.selectAllPlanningsCheckbox.evaluate((el: HTMLElement) => {
+        const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        if (input) input.click();
+      });
       await this.page.waitForTimeout(1000);
     } else {
       const plannings = await this.getAllPlannings(0, false);
@@ -462,13 +455,10 @@ export class PlanningRowObject {
   async clickOnCheckboxForMultipleDelete(valueCheckbox = true) {
     const isChecked = await this.checkboxDelete.locator('input').isChecked().catch(() => false);
     if (isChecked !== valueCheckbox) {
-      const mdcCheckbox = this.checkboxDelete.locator('.mdc-checkbox');
-      const box = await mdcCheckbox.boundingBox();
-      if (box && box.width > 0 && box.height > 0) {
-        await this.page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
-      } else {
-        await this.checkboxDelete.evaluate((el: HTMLElement) => { el.click(); });
-      }
+      await this.checkboxDelete.evaluate((el: HTMLElement) => {
+        const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        if (input) input.click();
+      });
       await this.page.waitForTimeout(500);
     }
   }