Skip to content

Commit

Permalink
Fixed #10996 - Table, TreeTable | Checkbox and RadioButton Focus Miss…
Browse files Browse the repository at this point in the history 
…ing on Material
  • Loading branch information
@yigitfindikli
yigitfindikli committed Dec 23, 2021
1 parent 94cca0b commit f61b526
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 26 deletions.
36 changes: 20 additions & 16 deletions src/app/components/table/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3836,12 +3836,12 @@ export class CellEditor implements AfterContentInit {
@Component({
selector: 'p-tableRadioButton',
template: `
<div class="p-radiobutton p-component" (click)="onClick($event)">
<div #container class="p-radiobutton p-component" [ngClass]="{'p-radiobutton-focused':focused}" (click)="onClick($event)">
<div class="p-hidden-accessible">
<input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
[disabled]="disabled" [attr.aria-label]="ariaLabel">
</div>
<div #box [ngClass]="{'p-radiobutton-box p-component':true, 'p-highlight':checked, 'p-disabled':disabled}" role="radio" [attr.aria-checked]="checked">
<div #box [ngClass]="{'p-radiobutton-box p-component':true, 'p-highlight':checked, 'p-focus':focused, 'p-disabled':disabled}" role="radio" [attr.aria-checked]="checked">
<div class="p-radiobutton-icon"></div>
</div>
</div>
Expand All @@ -3866,10 +3866,10 @@ export class TableRadioButton {

@Input() ariaLabel: string;

@ViewChild('box') boxViewChild: ElementRef;

checked: boolean;

focused: boolean;

subscription: Subscription;

constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) {
Expand All @@ -3894,11 +3894,11 @@ export class TableRadioButton {
}

onFocus() {
DomHandler.addClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = true;
}

onBlur() {
DomHandler.removeClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = false;
}

ngOnDestroy() {
Expand All @@ -3912,13 +3912,13 @@ export class TableRadioButton {
@Component({
selector: 'p-tableCheckbox',
template: `
<div class="p-checkbox p-component" (click)="onClick($event)">
<div #container class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event)">
<div class="p-hidden-accessible">
<input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled"
[attr.required]="required" [attr.aria-label]="ariaLabel">
</div>
<div #box [ngClass]="{'p-checkbox-box p-component':true,
'p-highlight':checked, 'p-disabled':disabled}" role="checkbox" [attr.aria-checked]="checked">
'p-highlight':checked, 'p-focus':focused, 'p-disabled':disabled}" role="checkbox" [attr.aria-checked]="checked">
<span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
</div>
</div>
Expand All @@ -3945,10 +3945,10 @@ export class TableCheckbox {

@Input() ariaLabel: string;

@ViewChild('box') boxViewChild: ElementRef;

checked: boolean;

focused: boolean;

subscription: Subscription;

constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) {
Expand All @@ -3973,11 +3973,11 @@ export class TableCheckbox {
}

onFocus() {
DomHandler.addClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = true;
}

onBlur() {
DomHandler.removeClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = false;
}

ngOnDestroy() {
Expand All @@ -3991,13 +3991,13 @@ export class TableCheckbox {
@Component({
selector: 'p-tableHeaderCheckbox',
template: `
<div class="p-checkbox p-component" (click)="onClick($event)">
<div #container class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event)">
<div class="p-hidden-accessible">
<input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
[disabled]="isDisabled()" [attr.aria-label]="ariaLabel">
</div>
<div #box [ngClass]="{'p-checkbox-box':true,
'p-highlight':checked, 'p-disabled': isDisabled()}" role="checkbox" [attr.aria-checked]="checked">
'p-highlight':checked, 'p-focus':focused, 'p-disabled': isDisabled()}" role="checkbox" [attr.aria-checked]="checked">
<span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
</div>
</div>
Expand All @@ -4012,6 +4012,8 @@ export class TableHeaderCheckbox {

@ViewChild('box') boxViewChild: ElementRef;

@ViewChild('container') containerViewChild: ElementRef;

@Input() disabled: boolean;

@Input() inputId: string;
Expand All @@ -4022,6 +4024,8 @@ export class TableHeaderCheckbox {

checked: boolean;

focused: boolean;

selectionChangeSubscription: Subscription;

valueChangeSubscription: Subscription;
Expand Down Expand Up @@ -4051,11 +4055,11 @@ export class TableHeaderCheckbox {
}

onFocus() {
DomHandler.addClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = true;
}

onBlur() {
DomHandler.removeClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = false;
}

isDisabled() {
Expand Down
22 changes: 12 additions & 10 deletions src/app/components/treetable/treetable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2446,12 +2446,12 @@ export class TTContextMenuRow {
@Component({
selector: 'p-treeTableCheckbox',
template: `
<div class="p-checkbox p-component" (click)="onClick($event)">
<div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event)">
<div class="p-hidden-accessible">
<input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()">
</div>
<div #box [ngClass]="{'p-checkbox-box':true,
'p-highlight':checked, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled':disabled}" role="checkbox" [attr.aria-checked]="checked">
'p-highlight':checked, 'p-focus':focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled':disabled}" role="checkbox" [attr.aria-checked]="checked">
<span class="p-checkbox-icon pi" [ngClass]="{'pi-check':checked, 'pi-minus': rowNode.node.partialSelected}"></span>
</div>
</div>
Expand All @@ -2468,10 +2468,10 @@ export class TTCheckbox {

@Input("value") rowNode: any;

@ViewChild('box') boxViewChild: ElementRef;

checked: boolean;

focused: boolean;

subscription: Subscription;

constructor(public tt: TreeTable, public tableService: TreeTableService, public cd: ChangeDetectorRef) {
Expand All @@ -2496,11 +2496,11 @@ export class TTCheckbox {
}

onFocus() {
DomHandler.addClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = true;
}

onBlur() {
DomHandler.removeClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = false;
}

ngOnDestroy() {
Expand All @@ -2514,12 +2514,12 @@ export class TTCheckbox {
@Component({
selector: 'p-treeTableHeaderCheckbox',
template: `
<div class="p-checkbox p-component" (click)="onClick($event, cb.checked)">
<div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event, cb.checked)">
<div class="p-hidden-accessible">
<input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value||tt.value.length === 0">
</div>
<div #box [ngClass]="{'p-checkbox-box':true,
'p-highlight':checked, 'p-disabled': (!tt.value || tt.value.length === 0)}" role="checkbox" [attr.aria-checked]="checked">
'p-highlight':checked, 'p-focus':focused, 'p-disabled': (!tt.value || tt.value.length === 0)}" role="checkbox" [attr.aria-checked]="checked">
<span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
</div>
</div>
Expand All @@ -2536,6 +2536,8 @@ export class TTHeaderCheckbox {

checked: boolean;

focused: boolean;

disabled: boolean;

selectionChangeSubscription: Subscription;
Expand Down Expand Up @@ -2565,11 +2567,11 @@ export class TTHeaderCheckbox {
}

onFocus() {
DomHandler.addClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = true;
}

onBlur() {
DomHandler.removeClass(this.boxViewChild.nativeElement, 'p-focus');
this.focused = false;
}

ngOnDestroy() {
Expand Down

0 comments on commit f61b526

Please sign in to comment.