fix(vex): set focus on internal element to workaround bug with css an…

…imation and focus outline

closes #121

src/components/angular2-modal/plugins/vex/dialog-form-modal.ts

@@ -118,7 +118,8 @@ export class DialogFormModal implements AfterViewInit, ModalComponent<DialogPres
     template: 
 `<div class="vex-dialog-message">{{context.message}}</div>
     <div *ngIf="context.showInput" class="vex-dialog-input">
-        <input name="vex" 
+        <input autofocus 
+               name="vex" 
                type="text" 
                class="vex-dialog-prompt-input"
                [(ngModel)]="context.defaultResult" 

src/components/angular2-modal/plugins/vex/modal-content.ts

@@ -1,73 +1,67 @@
 import {
-    Component,
-    ComponentResolver,
-    ElementRef,
-    ViewContainerRef,
-    ReflectiveInjector,
-    ViewChild,
-    ViewEncapsulation,
-    AfterViewInit
+  Component,
+  ComponentResolver,
+  ElementRef,
+  ViewContainerRef,
+  ReflectiveInjector,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
 } from '@angular/core';
 
-import {Modal} from './modal';
-import {ModalCompileConfig} from '../../models/tokens';
-import {DialogRef} from '../../models/dialog-ref';
-import {VEXModalContext} from './modal-context';
+import { Modal } from './modal';
+import { ModalCompileConfig } from '../../models/tokens';
+import { DialogRef } from '../../models/dialog-ref';
+import { VEXModalContext } from './modal-context';
 
 /**
  * A component that acts as a top level container for an open modal window.
  */
 @Component({
-    selector: 'modal-content',
-    host: {
-        'tabindex': '-1',
-        'role': 'dialog'
-    },
-    template:
-`<div tabindex="-1" role="dialog"
-      [class]="context.contentClassName" (clickOutside)="onClickOutside()">
+  selector: 'modal-content',
+  template: `<div tabindex="-1" role="dialog"
+      [class]="context.contentClassName" (clickOutside)="onClickOutside()" #dlgContainer>
     <div style="display: none" #modalDialog></div>    
     <div *ngIf="context.showCloseButton" 
          [class]="context.closeClassName" 
          (click)="dialog.dismiss()"></div>
 </div>`,
-    encapsulation: ViewEncapsulation.None,
+  encapsulation: ViewEncapsulation.None,
 })
 export class VexModalContent implements AfterViewInit {
-    private context: VEXModalContext;
-    @ViewChild('modalDialog', {read: ViewContainerRef}) private _viewContainer: ViewContainerRef;
+  private context: VEXModalContext;
+  @ViewChild('dlgContainer') private dlgContainer: ElementRef;
+  @ViewChild('modalDialog', {read: ViewContainerRef}) private _viewContainer: ViewContainerRef;
 
-    constructor(public dialog: DialogRef<VEXModalContext>,
-                private el: ElementRef,
-                private _modal: Modal,
-                private _compileConfig: ModalCompileConfig,
-                private _cr: ComponentResolver) {
-        this.context = dialog.context;
-    }
+  constructor(public dialog: DialogRef<VEXModalContext>,
+              private _modal: Modal,
+              private _compileConfig: ModalCompileConfig,
+              private _cr: ComponentResolver) {
+    this.context = dialog.context;
+  }
 
-    ngAfterViewInit() {
-        this._cr.resolveComponent(this._compileConfig.component)
-            .then(cmpFactory => {
-                const vcr = this._viewContainer,
-                      bindings = this._compileConfig.bindings,
-                      ctxInjector = vcr.parentInjector;
+  ngAfterViewInit() {
+    this._cr.resolveComponent(this._compileConfig.component)
+      .then(cmpFactory => {
+        const vcr = this._viewContainer,
+          bindings = this._compileConfig.bindings,
+          ctxInjector = vcr.parentInjector;
 
-                const childInjector = Array.isArray(bindings) && bindings.length > 0 ?
-                    ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector;
+        const childInjector = Array.isArray(bindings) && bindings.length > 0 ?
+          ReflectiveInjector.fromResolvedProviders(bindings, ctxInjector) : ctxInjector;
 
-                if (this.el.nativeElement) {
-                    this.el.nativeElement.focus();
-                }
+        if (this.dlgContainer.nativeElement) {
+          this.dlgContainer.nativeElement.focus();
+        }
 
-                return this.dialog.contentRef =
-                    vcr.createComponent(cmpFactory, vcr.length, childInjector);
-            });
-    }
+        return this.dialog.contentRef =
+          vcr.createComponent(cmpFactory, vcr.length, childInjector);
+      });
+  }
 
-    onClickOutside() {
-        // check that this modal is the last in the stack.
-        return this._modal.isTopMost(this.dialog) &&
-            !this.dialog.context.isBlocking &&
-            this.dialog.dismiss();
-    }
+  onClickOutside() {
+    // check that this modal is the last in the stack.
+    return this._modal.isTopMost(this.dialog) && !this.dialog.context.isBlocking &&
+      this.dialog.dismiss();
+  }
 }