feat: Add refocus prop to prevent refocus after close (#272)

* feat: Add refocus prop to prevent refocus after close

* refactor: Add option to component instance and type interface

* Add tests for the refocus prop

Co-authored-by: Dan <[email protected]>

src/app/doc/parts/options/options.component.ts

@@ -92,6 +92,12 @@ export class OptionsComponent implements OnInit {
       type: 'string',
       defaultValue: 'undefined',
       description: 'Define an accessible description for your modal. Enter the id of your description content.'
+    },
+    {
+      name: 'refocus',
+      type: 'boolean',
+      defaultValue: 'true',
+      description: 'Refocus on the last focused element after closing the modal.'
     }
   ];
   // tslint:enable:max-line-length

src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts

@@ -75,6 +75,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
   @Input() public ariaLabel: string | null = null;
   @Input() public ariaLabelledBy: string | null = null;
   @Input() public ariaDescribedBy: string | null = null;
+  @Input() public refocus: boolean = true;
 
   @Output() public visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() public onClose: EventEmitter<any> = new EventEmitter();

src/ngx-smart-modal/src/config/ngx-smart-modal.config.ts

@@ -16,4 +16,5 @@ export interface INgxSmartModalOptions {
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
+    refocus?: boolean;
 }

src/ngx-smart-modal/src/services/ngx-smart-modal.service.ts

@@ -255,6 +255,7 @@ export class NgxSmartModalService {
       if (typeof options.ariaLabel === 'string') { componentRef.instance.ariaLabel = options.ariaLabel; }
       if (typeof options.ariaLabelledBy === 'string') { componentRef.instance.ariaLabelledBy = options.ariaLabelledBy; }
       if (typeof options.ariaDescribedBy === 'string') { componentRef.instance.ariaDescribedBy = options.ariaDescribedBy; }
+      if (typeof options.refocus === 'boolean') { componentRef.instance.refocus = options.refocus; }
 
       this._appRef.attachView(componentRef.hostView);
 
@@ -383,7 +384,9 @@ export class NgxSmartModalService {
       modal.markForCheck();
       modal.onCloseFinished.emit(modal);
       modal.onAnyCloseEventFinished.emit(modal);
-      this.lastElementFocused.focus();
+      if (modal.refocus) {
+        this.lastElementFocused.focus();
+      }
     }, modal.hideDelay);
 
     return true;

src/ngx-smart-modal/tests/services/ngx-smart-modal.service.spec.ts

@@ -354,6 +354,53 @@ describe('NgxSmartModalService', () => {
     service.create('test2', 'test content');
   }));
 
+  it('should refocus on close', fakeAsync(inject([NgxSmartModalService], (service: NgxSmartModalService) => {
+    const fixture = TestBed.createComponent(NgxSmartModalComponent);
+    const focusElement = fixture.nativeElement.appendChild(document.createElement('input'));
+    const app = fixture.debugElement.componentInstance;
+    app.identifier = 'test';
+    app.target = 'test-target';
+
+    service.addModal({ id: 'test', modal: app });
+    focusElement.focus();
+
+    expect(document.activeElement === focusElement).toBeTruthy();
+
+    service.open('test');
+    tick(501);
+
+    expect(document.activeElement === focusElement).toBeFalsy();
+
+    service.close('test');
+    tick(501);
+
+    expect(document.activeElement === focusElement).toBeTruthy();
+  })));
+
+  it('should not refocus on close if refocus is turned off', fakeAsync(inject([NgxSmartModalService], (service: NgxSmartModalService) => {
+    const fixture = TestBed.createComponent(NgxSmartModalComponent);
+    const focusElement = fixture.nativeElement.appendChild(document.createElement('input'));
+    const app = fixture.debugElement.componentInstance;
+    app.identifier = 'test';
+    app.target = 'test-target';
+    app.refocus = false;
+
+    service.addModal({ id: 'test', modal: app });
+    focusElement.focus();
+
+    expect(document.activeElement === focusElement).toBeTruthy();
+
+    service.open('test');
+    tick(501);
+
+    expect(document.activeElement === focusElement).toBeFalsy();
+
+    service.close('test');
+    tick(501);
+
+    expect(document.activeElement === focusElement).toBeFalsy();
+  })));
+
   it('should resolve content', inject([NgxSmartModalService], (service: NgxSmartModalService) => {
     (service as any)._resolveNgContent('test content');
     (service as any)._resolveNgContent(FakeComponent);