fix(modal): attempt to focus when there is no focusable element on mo…

…dal dialog (cherry picked from commit 3f50a06)
coreui · Jun 17, 2024 · 9f23c3d · 9f23c3d
1 parent 7c7fcf4
commit 9f23c3d
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 43 deletions.
diff --git a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.spec.ts
@@ -9,8 +9,7 @@ describe('ModalBodyComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalBodyComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts b/projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts
@@ -7,11 +7,10 @@ import { Component, HostBinding } from '@angular/core';
   standalone: true
 })
 export class ModalBodyComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'modal-body': true,
+      'modal-body': true
     };
   }
 }
diff --git a/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-content/modal-content.component.spec.ts
@@ -9,8 +9,7 @@ describe('ModalContentComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalContentComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-dialog/modal-dialog.component.spec.ts
@@ -9,8 +9,7 @@ describe('ModalDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalDialogComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.spec.ts
@@ -9,8 +9,7 @@ describe('ModalFooterComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalFooterComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts b/projects/coreui-angular/src/lib/modal/modal-footer/modal-footer.component.ts
@@ -6,12 +6,10 @@ import { Component, HostBinding } from '@angular/core';
   standalone: true
 })
 export class ModalFooterComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'modal-footer': true,
+      'modal-footer': true
     };
   }
-
 }
diff --git a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.spec.ts
@@ -9,8 +9,7 @@ describe('ModalHeaderComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ModalHeaderComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts b/projects/coreui-angular/src/lib/modal/modal-header/modal-header.component.ts
@@ -6,12 +6,10 @@ import { Component, HostBinding } from '@angular/core';
   standalone: true
 })
 export class ModalHeaderComponent {
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'modal-header': true
     };
   }
-
 }
diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts
@@ -54,7 +54,6 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component';
   imports: [ModalDialogComponent, ModalContentComponent, A11yModule]
 })
 export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
-
   #destroyRef = inject(DestroyRef);
   #focusMonitor = inject(FocusMonitor);
 
@@ -64,7 +63,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
     private hostElement: ElementRef,
     private modalService: ModalService,
     private backdropService: BackdropService
-  ) { }
+  ) {}
 
   /**
    * Align the modal in the center or top of the screen.
@@ -110,14 +109,15 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
    * @type boolean
    * @default null
    */
-  @Input() @HostBinding('attr.aria-modal')
+  @Input()
+  @HostBinding('attr.aria-modal')
   set ariaModal(value: boolean | null) {
     this.#ariaModal = value;
   }
 
   get ariaModal(): boolean | null {
     return this.visible || this.#ariaModal ? true : null;
-  };
+  }
 
   #ariaModal: boolean | null = null;
 
@@ -154,8 +154,12 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
       this.#activeElement = this.document.activeElement as HTMLElement;
       // this.#activeElement?.blur();
       setTimeout(() => {
-        const focusable = this.modalContentRef.nativeElement.querySelectorAll('[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])');
-        this.#focusMonitor.focusVia(focusable[0], 'keyboard');
+        const focusable = this.modalContentRef.nativeElement.querySelectorAll(
+          '[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+        );
+        if (focusable.length) {
+          this.#focusMonitor.focusVia(focusable[0], 'keyboard');
+        }
       });
     } else {
       if (this.document.contains(this.#activeElement)) {
@@ -191,7 +195,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
   @HostBinding('attr.aria-hidden')
   get ariaHidden(): boolean | null {
     return this.visible ? null : true;
-  };
+  }
 
   @HostBinding('attr.tabindex')
   get tabIndex(): string | null {
@@ -255,15 +259,13 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
 
   @HostListener('click', ['$event'])
   public onClickHandler($event: MouseEvent): void {
-
     if (this.mouseDownTarget !== $event.target) {
       this.mouseDownTarget = null;
       return;
     }
 
     const targetElement = $event.target;
     if (targetElement === this.hostElement.nativeElement) {
-
       if (this.backdrop === 'static') {
         this.setStaticBackdrop();
         return;
@@ -289,27 +291,23 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private stateToggleSubscribe(): void {
-    this.modalService.modalState$
-      .pipe(
-        takeUntilDestroyed(this.#destroyRef)
-      )
-      .subscribe(
-        (action) => {
-          if (this === action.modal || this.id === action.id) {
-            if ('show' in action) {
-              this.visible = action?.show === 'toggle' ? !this.visible : action.show;
-            }
-          } else {
-            if (this.visible) {
-              this.visible = false;
-            }
-          }
+    this.modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
+      if (this === action.modal || this.id === action.id) {
+        if ('show' in action) {
+          this.visible = action?.show === 'toggle' ? !this.visible : action.show;
+        }
+      } else {
+        if (this.visible) {
+          this.visible = false;
         }
-      );
+      }
+    });
   }
 
   private setBackdrop(setBackdrop: boolean): void {
-    this.#activeBackdrop = setBackdrop ? this.backdropService.setBackdrop('modal') : this.backdropService.clearBackdrop(this.#activeBackdrop);
+    this.#activeBackdrop = setBackdrop
+      ? this.backdropService.setBackdrop('modal')
+      : this.backdropService.clearBackdrop(this.#activeBackdrop);
   }
 
   private setBodyStyles(open: boolean): void {