fix(alert): disable listeners until ready

Closes #5821
ionic-team · Mar 13, 2016 · 5844703 · 5844703
1 parent 355f6ee
commit 5844703
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 20 deletions.
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
@@ -193,6 +193,7 @@ class ActionSheetCmp {
   private descId: string;
   private hdrId: string;
   private id: number;
+  private created: number;
 
   constructor(
     private _viewCtrl: ViewController,
@@ -202,6 +203,7 @@ class ActionSheetCmp {
     renderer: Renderer
   ) {
     this.d = params.data;
+    this.created = Date.now();
 
     if (this.d.cssClass) {
       renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
@@ -262,15 +264,19 @@ class ActionSheetCmp {
 
   @HostListener('body:keyup', ['$event'])
   private _keyUp(ev: KeyboardEvent) {
-    if (this._viewCtrl.isLast()) {
+    if (this.isEnabled() && this._viewCtrl.isLast()) {
       if (ev.keyCode === 27) {
-        console.debug('actionsheet escape');
+        console.debug('actionsheet, escape button');
         this.bdClick();
       }
     }
   }
 
   click(button, dismissDelay?) {
+    if (!this.isEnabled()) {
+      return;
+    }
+
     let shouldDismiss = true;
 
     if (button.handler) {
@@ -289,7 +295,7 @@ class ActionSheetCmp {
   }
 
   bdClick() {
-    if (this.d.enableBackdropDismiss) {
+    if (this.isEnabled() && this.d.enableBackdropDismiss) {
       if (this.d.cancelButton) {
         this.click(this.d.cancelButton, 1);
 
@@ -302,6 +308,10 @@ class ActionSheetCmp {
   dismiss(role): Promise<any> {
     return this._viewCtrl.dismiss(null, role);
   }
+
+  isEnabled() {
+    return (this.created + 750 < Date.now());
+  }
 }
 
 export interface ActionSheetOptions {

diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts
@@ -311,21 +311,22 @@ export class Alert extends ViewController {
   directives: [NgClass, NgSwitch, NgIf, NgFor]
 })
 class AlertCmp {
-  activeId: string;
-  descId: string;
-  d: {
+  private activeId: string;
+  private descId: string;
+  private d: {
     cssClass?: string;
     message?: string;
     subTitle?: string;
     buttons?: any[];
     inputs?: any[];
     enableBackdropDismiss?: boolean;
   };
-  hdrId: string;
-  id: number;
-  subHdrId: string;
-  msgId: string;
-  inputType: string;
+  private hdrId: string;
+  private id: number;
+  private subHdrId: string;
+  private msgId: string;
+  private inputType: string;
+  private created: number;
 
   constructor(
     private _viewCtrl: ViewController,
@@ -348,6 +349,7 @@ class AlertCmp {
     this.subHdrId = 'alert-subhdr-' + this.id;
     this.msgId = 'alert-msg-' + this.id;
     this.activeId = '';
+    this.created = Date.now();
 
     if (this.d.message) {
       this.descId = this.msgId;
@@ -414,7 +416,7 @@ class AlertCmp {
 
   @HostListener('body:keyup', ['$event'])
   private _keyUp(ev: KeyboardEvent) {
-    if (this._viewCtrl.isLast()) {
+    if (this.isEnabled() && this._viewCtrl.isLast()) {
       if (ev.keyCode === 13) {
         console.debug('alert, enter button');
         let button = this.d.buttons[this.d.buttons.length - 1];
@@ -440,6 +442,10 @@ class AlertCmp {
   }
 
   btnClick(button, dismissDelay?) {
+    if (!this.isEnabled()) {
+      return;
+    }
+
     let shouldDismiss = true;
 
     if (button.handler) {
@@ -459,18 +465,22 @@ class AlertCmp {
   }
 
   rbClick(checkedInput) {
-    this.d.inputs.forEach(input => {
-      input.checked = (checkedInput === input);
-    });
-    this.activeId = checkedInput.id;
+    if (this.isEnabled()) {
+      this.d.inputs.forEach(input => {
+        input.checked = (checkedInput === input);
+      });
+      this.activeId = checkedInput.id;
+    }
   }
 
   cbClick(checkedInput) {
-    checkedInput.checked = !checkedInput.checked;
+    if (this.isEnabled()) {
+      checkedInput.checked = !checkedInput.checked;
+    }
   }
 
   bdClick() {
-    if (this.d.enableBackdropDismiss) {
+    if (this.isEnabled() && this.d.enableBackdropDismiss) {
       let cancelBtn = this.d.buttons.find(b => b.role === 'cancel');
       if (cancelBtn) {
         this.btnClick(cancelBtn, 1);
@@ -507,6 +517,10 @@ class AlertCmp {
     });
     return values;
   }
+
+  isEnabled() {
+    return (this.created + 750 < Date.now());
+  }
 }
 
 export interface AlertOptions {

diff --git a/ionic/components/alert/test/dismiss/index.ts b/ionic/components/alert/test/dismiss/index.ts
@@ -1,4 +1,5 @@
 import { Alert, NavController, App, Page } from 'ionic-angular/index';
+import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators } from 'angular2/common';
 
 
 @Page({
@@ -37,13 +38,45 @@ export class E2EPage {
       <ion-title>Another Page</ion-title>
     </ion-navbar>
     <ion-content padding>
-      Welcome!
+      <form [ngFormModel]="form" (ngSubmit)="submit(form.value)">
+    		<ion-list>
+    			<ion-item [class.error]="!form.controls.name.valid && form.controls.name.touched">
+    				<ion-label>Name</ion-label>
+    				<ion-input type="text" [(ngFormControl)]="form.controls.name"></ion-input>
+    			</ion-item>
+  			</ion-list>
+  			<div padding style="padding-top: 0 !important;">
+    			<button list-item primary block>
+      			Submit
+      		</button>
+    		</div>
+			</form>
     </ion-content>
   `
 })
 class AnotherPage {
+  form: ControlGroup;
 
-  constructor(private nav: NavController) {}
+	constructor(private nav: NavController, private builder: FormBuilder) {
+		this.form = builder.group({
+			name: builder.control('', Validators.compose([
+			    Validators.required,
+			    Validators.minLength(5)
+			]))
+		});
+	}
+
+	submit(value: any): void {
+		if (this.form.valid) {
+			console.log(value);
+		} else {
+			this.nav.present(Alert.create({
+				title: 'Invalid input data',
+				subTitle: "Please correct the errors and resubmit the data.",
+				buttons: [ 'OK' ]
+			}));
+		}
+	}
 
   onPageDidEnter() {
     this.showConfirm();