Merge pull request #13977 from SoyDiego/13946-fix-tristatecheckbox

TriStateCheckbox: Fix problem when click on label and updated docs
primefaces · Nov 8, 2023 · 09fc9ea · 09fc9ea
2 parents 2c22d24 + 19d4fc7
commit 09fc9ea
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.css b/src/app/components/tristatecheckbox/tristatecheckbox.css
@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-tristatecheckbox-label {
+        cursor: pointer;
+    }
+}
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts
@@ -19,15 +19,14 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-triStateCheckbox',
     template: `
-        <div
-            [ngStyle]="style"
-            [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }"
-            [class]="styleClass"
-            (click)="onClick($event, input)"
-            [attr.data-pc-name]="'tristatecheckbox'"
-            [attr.data-pc-section]="'root'"
+        <div [ngStyle]="style" 
+              [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }" 
+              [class]="styleClass" 
+              (click)="onClick($event, input)"
+              [attr.data-pc-name]="'tristatecheckbox'"
+              [attr.data-pc-section]="'root'"
         >
-            <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
+            <div class="p-hidden-accessible">
                 <input
                     #input
                     [attr.id]="inputId"
@@ -66,7 +65,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
                 </ng-container>
             </div>
         </div>
-        <label class="p-checkbox-label" (click)="onClick($event, input)" [ngClass]="{ 'p-checkbox-label-active': value != null, 'p-disabled': disabled, 'p-checkbox-label-focus': focused }" *ngIf="label" [attr.for]="inputId">{{ label }}</label>
+        <label class="p-tristatecheckbox-label" [ngClass]="{ 'p-checkbox-label-active': value != null, 'p-disabled': disabled, 'p-checkbox-label-focus': focused }" *ngIf="label" [attr.for]="inputId">{{ label }}</label>
     `,
     providers: [TRISTATECHECKBOX_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex flex-column gap-3 align-items-center">
             <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-            <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+            <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-basic-demo"></app-code>
     </section>`
@@ -23,12 +23,12 @@ export class BasicDoc {
 
     code: Code = {
         basic: `
-<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
+<p-triStateCheckbox class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
 
         html: `
 <div class="card flex flex-column gap-3 align-items-center">
     <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-    <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+    <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
@@ -11,7 +11,7 @@ import { Code } from '../../domain/code';
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
                 <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-                <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+                <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
             </form>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-reactive-forms-demo"></app-code>
@@ -34,14 +34,14 @@ export class ReactiveFormsDoc implements OnInit {
         basic: `
 <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
     <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-    <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+    <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
 </form>`,
 
         html: `
 <div class="card flex justify-content-center">
     <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
         <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-        <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+        <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
     </form>
 </div>`,