fix: use evaluate(el.click()) for mat-checkbox MDC compatibility

Angular Material MDC checkboxes have invisible labels that can't be
clicked via Playwright's normal click. Use JS evaluate to click the
input element directly. Also wait for delete button to be enabled
before clicking, and dispatch input event for tag creation.

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

Author: renemadsen

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

@@ -142,14 +142,17 @@ export class PairingRowObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairRowForClick.click({ force: true });
+      await this.pairRowForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+      await this.page.waitForTimeout(500);
       if ((await this.pairRow.locator('input').isChecked()) !== pair) {
-        await this.pairRowForClick.click({ force: true });
+        await this.pairRowForClick.locator('input').evaluate((el: HTMLInputElement) => el.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].click({ force: true });
+          await this.pairCheckboxesForClick[i].locator('input').evaluate((el: HTMLInputElement) => el.click());
+          await this.page.waitForTimeout(500);
         }
       }
     }
@@ -161,7 +164,7 @@ export class PairingRowObject {
     indexDeviceForPair: number,
     clickCancel = false
   ) {
-    await this.pairCheckboxesForClick[indexDeviceForPair].click({ force: true });
+    await this.pairCheckboxesForClick[indexDeviceForPair].locator('input').evaluate((el: HTMLInputElement) => el.click());
     await this.page.waitForTimeout(1000);
     await this.pairingPage.savePairing(clickCancel);
   }
@@ -213,14 +216,17 @@ export class PairingColObject {
     clickCancel = false
   ) {
     if (clickOnPairRow) {
-      await this.pairColForClick.click({ force: true });
+      await this.pairColForClick.locator('input').evaluate((el: HTMLInputElement) => el.click());
+      await this.page.waitForTimeout(500);
       if ((await this.pairCol.locator('input').isChecked()) !== pair) {
-        await this.pairColForClick.click({ force: true });
+        await this.pairColForClick.locator('input').evaluate((el: HTMLInputElement) => el.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].click({ force: true });
+          await this.pairCheckboxesForClick[i].locator('input').evaluate((el: HTMLInputElement) => el.click());
+          await this.page.waitForTimeout(500);
         }
       }
     }

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

@@ -170,7 +170,7 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
   }
 
   async openMultipleDelete() {
-    await this.deleteMultiplePluginsBtn.waitFor({ state: 'visible', timeout: 40000 });
+    await this.page.locator('#deleteMultiplePluginsBtn:not([disabled])').waitFor({ state: 'visible', timeout: 40000 });
     await this.page.waitForTimeout(500);
     await this.deleteMultiplePluginsBtn.click();
   }
@@ -195,9 +195,9 @@ export class ItemsPlanningPlanningPage extends PageWithNavbarPage {
     if (!pickOne) {
       const isChecked = await this.selectAllPlanningsCheckbox.locator('input').isChecked().catch(() => false);
       if (isChecked !== valueCheckbox) {
-        // Click on the mat-checkbox element itself to toggle
-        await this.selectAllPlanningsCheckbox.click({ force: true, position: { x: 10, y: 10 } });
-        await this.page.waitForTimeout(500);
+        // Use JavaScript click on the internal checkbox input to ensure Angular detects the change
+        await this.selectAllPlanningsCheckbox.locator('input').evaluate((el: HTMLInputElement) => el.click());
+        await this.page.waitForTimeout(1000);
       }
     } else {
       const plannings = await this.getAllPlannings(0, false);
@@ -437,7 +437,8 @@ export class PlanningRowObject {
   async clickOnCheckboxForMultipleDelete(valueCheckbox = true) {
     const isChecked = await this.checkboxDelete.locator('input').isChecked().catch(() => false);
     if (isChecked !== valueCheckbox) {
-      await this.checkboxDelete.click({ force: true, position: { x: 10, y: 10 } });
+      await this.checkboxDelete.locator('input').evaluate((el: HTMLInputElement) => el.click());
+      await this.page.waitForTimeout(500);
     }
   }
 

eform-client/playwright/e2e/plugins/items-planning-pn/c/items-planning.tags.spec.ts

@@ -28,15 +28,16 @@ test.describe.serial('Items planning - Tags', () => {
   test('should create tag', async () => {
     const tagsModalPage = new TagsModalPage(page);
     const tagsRowsBeforeCreate = await tagsModalPage.rowNum();
-    // Manually create tag — click new tag button, type name, click save
     await tagsModalPage.newTagBtn().click();
     await page.waitForTimeout(500);
     await page.locator('#newTagName').waitFor({ state: 'visible', timeout: 90000 });
-    // Use click + type instead of fill to ensure Angular ngModel picks up the value
-    await tagsModalPage.newTagNameInput().click();
-    await tagsModalPage.newTagNameInput().pressSequentially(tagName, { delay: 50 });
+    await tagsModalPage.newTagNameInput().fill(tagName);
+    await page.waitForTimeout(500);
+    // Dispatch input event to ensure Angular ngModel picks up the value
+    await tagsModalPage.newTagNameInput().evaluate((el: HTMLInputElement) => {
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    });
     await page.waitForTimeout(500);
-    // Verify button is enabled before clicking
     await page.locator('#newTagSaveBtn:not([disabled])').waitFor({ state: 'visible', timeout: 10000 });
     await tagsModalPage.newTagSaveBtn().click();
     await page.waitForTimeout(500);