fix(mat/paginator): fix focus issues with paginator buttons

fixed to where if paginator button gets disabled while focused, focus will go to next appropriat button fixes b/286098030
angular · Jul 3, 2024 · d71be60 · d71be60
1 parent 35ce605
commit d71be60
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html
@@ -42,8 +42,9 @@
       </div>
 
       @if (showFirstLastButtons) {
-        <button mat-icon-button type="button"
+        <button #firstButton mat-icon-button type="button"
                 class="mat-mdc-paginator-navigation-first"
+                (blur)="handleButtonBlur(firstButton)"
                 (click)="firstPage()"
                 [attr.aria-label]="_intl.firstPageLabel"
                 [matTooltip]="_intl.firstPageLabel"
@@ -58,8 +59,9 @@
           </svg>
         </button>
       }
-      <button mat-icon-button type="button"
+      <button #previousButton mat-icon-button type="button"
               class="mat-mdc-paginator-navigation-previous"
+              (blur)="handleButtonBlur(previousButton)"
               (click)="previousPage()"
               [attr.aria-label]="_intl.previousPageLabel"
               [matTooltip]="_intl.previousPageLabel"
@@ -73,8 +75,9 @@
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
         </svg>
       </button>
-      <button mat-icon-button type="button"
+      <button #nextButton mat-icon-button type="button"
               class="mat-mdc-paginator-navigation-next"
+              (blur)="handleButtonBlur(nextButton)"
               (click)="nextPage()"
               [attr.aria-label]="_intl.nextPageLabel"
               [matTooltip]="_intl.nextPageLabel"
@@ -89,8 +92,9 @@
         </svg>
       </button>
       @if (showFirstLastButtons) {
-        <button mat-icon-button type="button"
+        <button #lastButton mat-icon-button type="button"
                 class="mat-mdc-paginator-navigation-last"
+                (blur)="handleButtonBlur(lastButton)"
                 (click)="lastPage()"
                 [attr.aria-label]="_intl.lastPageLabel"
                 [matTooltip]="_intl.lastPageLabel"

diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts
@@ -10,6 +10,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Inject,
   InjectionToken,
@@ -18,6 +19,7 @@ import {
   OnInit,
   Optional,
   Output,
+  ViewChild,
   ViewEncapsulation,
   booleanAttribute,
   numberAttribute,
@@ -199,6 +201,59 @@ export class MatPaginator implements OnInit, OnDestroy {
   /** Emits when the paginator is initialized. */
   initialized: Observable<void> = this._initializedStream;
 
+  /** Element references for paginator buttons */
+  @ViewChild('nextButton', {read: ElementRef, static: false})
+  nextButtonRef: ElementRef;
+  @ViewChild('previousButton', {read: ElementRef, static: false})
+  previousButtonRef: ElementRef;
+  @ViewChild('firstButton', {read: ElementRef, static: false})
+  firstButtonRef: ElementRef;
+  @ViewChild('lastButton', {read: ElementRef, static: false})
+  lastButtonRef: ElementRef;
+
+  /** Function to change focus to next appropriate button whenever
+   * current button becomes disabled and focus comes off*/
+  handleButtonBlur(buttonRef: MatIconButton) {
+    const button = buttonRef._elementRef.nativeElement;
+    const nextButton = this.nextButtonRef.nativeElement;
+    const previousButton = this.previousButtonRef.nativeElement;
+
+    if (!this.showFirstLastButtons && button.disabled) {
+      if (button === nextButton) {
+        if (!previousButton.disabled) {
+          console.log(document.activeElement);
+          previousButton.focus();
+        }
+      } else if (button === previousButton) {
+        if (!nextButton.disabled) {
+          console.log(document.activeElement);
+          nextButton.focus();
+        }
+      }
+    } else if (this.showFirstLastButtons && button.disabled) {
+      const firstButton = this.firstButtonRef.nativeElement;
+      const lastButton = this.lastButtonRef.nativeElement;
+
+      if (button === nextButton) {
+        if (!previousButton.disabled) {
+          previousButton.focus();
+        }
+      } else if (button === previousButton) {
+        if (!nextButton.disabled) {
+          nextButton.focus();
+        }
+      } else if (button === firstButton) {
+        setTimeout(() => {
+          nextButton.focus();
+        }, 100);
+      } else if (button === lastButton) {
+        setTimeout(() => {
+          previousButton.focus();
+        }, 100);
+      }
+    }
+  }
+
   constructor(
     public _intl: MatPaginatorIntl,
     private _changeDetectorRef: ChangeDetectorRef,