fix(core): Checkbox link in label is not clickable (#12636)

* fix(core): Checkbox link in label is not clickable closes [#12577](#12577) ## Description Updated the checkbox component to ensure that links within custom labels are clickable and function as intended. This resolves the issue observed in the documentation example. * fix(platform): table showing info bar with selected filters closes [#11783](#11783) - Refactored/simplified css selector for pointer event * fix(core): do not pointer-events: auto for disabled checkboxes * fix: e2e --------- Co-authored-by: Mike O'Donnell <[email protected]> Co-authored-by: deno <[email protected]> Co-authored-by: [email protected] <[email protected]>
SAP · Nov 22, 2024 · e8b42cc · e8b42cc
1 parent d615e77
commit e8b42cc
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/libs/core/checkbox/checkbox/checkbox.component.scss b/libs/core/checkbox/checkbox/checkbox.component.scss
@@ -7,6 +7,17 @@ fd-checkbox {
 
     .fd-checkbox__label {
         user-select: none;
+
+        &-container {
+            pointer-events: auto;
+        }
+    }
+
+    .fd-checkbox.is-disabled,
+    .fd-checkbox.is-readonly {
+        & + .fd-checkbox__label .fd-checkbox__label-container {
+            pointer-events: none !important;
+        }
     }
 
     &.fd-checkbox--standalone {

diff --git a/libs/docs/platform/checkbox/e2e/checkbox.e2e-spec.ts b/libs/docs/platform/checkbox/e2e/checkbox.e2e-spec.ts
@@ -32,7 +32,6 @@ describe('Checkbox test suite', () => {
         checkboxWithValue,
         tristateCheckboxes,
         tristateCheckboxParis,
-        errorCheckboxes,
         presenceCheckbox,
         accessibilityCheckboxes,
         disabledAccessibilityCheckbox,
@@ -133,16 +132,15 @@ describe('Checkbox test suite', () => {
 
     describe('Checkbox With Form and State Change on Error', () => {
         it('should check error handling examples', async () => {
-            await scrollIntoView(errorCheckboxes, 1);
-            await click(errorCheckboxes, 1);
+            await clickNextElement(presenceCheckbox);
             await waitForElDisplayed(checkboxPage.errorTooltip);
             await expect((await getText(checkboxPage.errorTooltip)).trim()).toEqual(checkboxErrorTooltip);
             // TODO improve hover check stability for FF
             if (await browserIsFirefox()) {
                 console.log('skip hover check');
                 return;
             }
-        }, 1);
+        });
 
         it('should check error handling form submission', async () => {
             await click(checkboxPage.submitBtn);

diff --git a/libs/docs/platform/checkbox/e2e/checkbox.po.ts b/libs/docs/platform/checkbox/e2e/checkbox.po.ts
@@ -10,7 +10,6 @@ export class CheckboxPO extends PlatformBaseComponentPo {
     checkboxWithValue = 'fdp-platform-multiselect-checkbox input';
     tristateCheckboxes = 'fdp-platform-tristate-checkbox input';
     tristateCheckboxParis = '.fd-checkbox__label[for=paris] span.fd-checkbox__checkmark';
-    errorCheckboxes = 'fdp-platform-checkbox-error-handling .fd-checkbox__label';
     presenceCheckbox = 'fdp-platform-checkbox-error-handling #presence';
     submitBtn = 'fdp-platform-checkbox-error-handling button';
     errorTooltip = '[type="error"] span';

diff --git a/libs/docs/platform/checkbox/examples/platform-checkbox-error-handling.component.html b/libs/docs/platform/checkbox/examples/platform-checkbox-error-handling.component.html
@@ -18,15 +18,15 @@ <h3>Checkbox Error Handling</h3>
     </fdp-form-field>
     <fdp-form-field
         #ffr2
-        id="aggrement"
+        id="agreement"
         [validators]="validators"
         [hint]="{ content: 'hint text', placement: 'left' }"
         [rank]="15"
         [column]="2"
         [required]="true"
     >
         <fdp-checkbox
-            name="aggrement-cb"
+            name="agreement-cb"
             title="Do you Agree with Terms and Conditions"
             [formControl]="ffr2.formControl"
         >

diff --git a/libs/docs/platform/checkbox/examples/platform-checkbox-error-handling.component.ts b/libs/docs/platform/checkbox/examples/platform-checkbox-error-handling.component.ts
@@ -22,7 +22,7 @@ import { CheckboxComponent, FdpFormGroupModule } from '@fundamental-ngx/platform
 export class PlatformChekboxStyleComponent {
     customForm = new FormGroup({
         presence: new FormControl(),
-        aggrement: new FormControl()
+        agreement: new FormControl()
     });
     data = new SomeObject(true, true);
     validators = [Validators.requiredTrue];
@@ -35,6 +35,6 @@ export class PlatformChekboxStyleComponent {
 class SomeObject {
     constructor(
         public presence: boolean,
-        public aggrement: boolean
+        public agreement: boolean
     ) {}
 }