fix(modal): autoFocus does' t work (#UIM-133) (#204)

positive-js · Aug 19, 2019 · 6038e05 · 6038e05
1 parent 5a84ebe
commit 6038e05
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/packages/mosaic-dev/modal/module.ts b/packages/mosaic-dev/modal/module.ts
@@ -82,11 +82,18 @@ export class ModalDemoComponent {
                 subtitle: 'component sub title，will be changed after 2 sec'
             },
             mcFooter: [{
-                label: 'change component title from outside',
+                label: 'button 1',
                 type: 'primary',
                 onClick: (componentInstance: any) => {
                     componentInstance.title = 'title in inner component is changed';
                 }
+            }, {
+                label: 'button 2',
+                type: 'primary',
+                autoFocus: true,
+                onClick: (componentInstance: any) => {
+                    componentInstance.title = 'title in inner component is changed';
+                }
             }]
         });
 

diff --git a/packages/mosaic/modal/modal.component.html b/packages/mosaic/modal/modal.component.html
@@ -83,6 +83,8 @@
             <ng-container *ngSwitchCase="isModalButtons(mcFooter)">
                 <button *ngFor="let button of mcFooter"
                         mc-button
+                        #autoFocusedButton
+                        [attr.autofocus]="button.autoFocus"
                         [hidden]="!getButtonCallableProp(button, 'show')"
                         [disabled]="getButtonCallableProp(button, 'disabled')"
                         (click)="onButtonClick(button)"
@@ -91,10 +93,17 @@
                 </button>
             </ng-container>
             <ng-container *ngSwitchDefault>
-                <button *ngIf="mcOkText!==null" mc-button color="primary" (click)="onClickOkCancel('ok')">
+                <button
+                    #autoFocusedButton
+                    [attr.autofocus]="true"
+                    *ngIf="mcOkText !== null"
+                    mc-button
+                    color="primary"
+                    (click)="onClickOkCancel('ok')">
+
                     {{ okText }}
                 </button>
-                <button *ngIf="mcCancelText!==null" mc-button (click)="onClickOkCancel('cancel')" autofocus>
+                <button *ngIf="mcCancelText!==null" mc-button (click)="onClickOkCancel('cancel')">
                     {{ cancelText }}
                 </button>
             </ng-container>
@@ -124,10 +133,17 @@
         </div> <!-- /.mc-confirm-body-wrapper -->
     </div>
     <div class="mc-confirm-btns">
-        <button mc-button [color]="mcOkType" #autoFocusButtonOk *ngIf="mcOkText !== ''" (click)="onClickOkCancel('ok')">
+        <button
+            mc-button
+            #autoFocusedButton
+            [color]="mcOkType"
+            [attr.autofocus]="true"
+            *ngIf="mcOkText !== ''"
+            (click)="onClickOkCancel('ok')">
+
             {{ okText }}
         </button>
-        <button mc-button color="second" *ngIf="mcCancelText!==''" (click)="onClickOkCancel('cancel')" autofocus>
+        <button mc-button color="second" *ngIf="mcCancelText!==''" (click)="onClickOkCancel('cancel')">
             {{ cancelText }}
         </button>
     </div>

diff --git a/packages/mosaic/modal/modal.component.ts b/packages/mosaic/modal/modal.component.ts
@@ -14,11 +14,13 @@ import {
     OnDestroy,
     OnInit,
     Output,
+    QueryList,
     Renderer2,
     SimpleChanges,
     TemplateRef,
     Type,
     ViewChild,
+    ViewChildren,
     ViewContainerRef, ViewEncapsulation
 } from '@angular/core';
 import { ESCAPE } from '@ptsecurity/cdk/keycodes';
@@ -122,7 +124,7 @@ export class McModalComponent<T = any, R = any> extends McModalRef<T, R>
     @ViewChild('modalContainer', { static: true }) modalContainer: ElementRef;
     @ViewChild('bodyContainer', { read: ViewContainerRef, static: false}) bodyContainer: ViewContainerRef;
     // Only aim to focus the ok button that needs to be auto focused
-    @ViewChild('autoFocusButtonOk', { read: ElementRef, static: false}) autoFocusButtonOk: ElementRef;
+    @ViewChildren('autoFocusedButton', { read: ElementRef }) autoFocusedButtons: QueryList<ElementRef>;
 
     maskAnimationClassMap: object;
     modalAnimationClassMap: object;
@@ -221,8 +223,12 @@ export class McModalComponent<T = any, R = any> extends McModalRef<T, R>
             this.bodyContainer.insert(this.contentComponentRef.hostView);
         }
 
-        if (this.autoFocusButtonOk) {
-            (this.autoFocusButtonOk.nativeElement as HTMLButtonElement).focus();
+        for (const autoFocusedButton of this.autoFocusedButtons.toArray()) {
+            if (autoFocusedButton.nativeElement.autofocus) {
+                (autoFocusedButton.nativeElement as HTMLButtonElement).focus();
+
+                break;
+            }
         }
     }
 

diff --git a/packages/mosaic/modal/modal.type.ts b/packages/mosaic/modal/modal.type.ts
@@ -65,5 +65,7 @@ export interface IModalButtonOptions<T = any> {
     loading?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
 
+    autoFocus?: boolean;
+
     onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
 }