From f829bd84504c23b8b7a917ee3b9ded9e7c893a1a Mon Sep 17 00:00:00 2001
From: Justin DuJardin <justin@dujardinconsulting.com>
Date: Sat, 2 Jan 2016 16:09:58 -0800
Subject: [PATCH] fix(backdrop): do not dismiss when clicked while animating to
 show

 - add test to verify behavior
---
 ng2-material/components/backdrop/backdrop.ts |  7 ++++++-
 test/components/backdrop/backdrop_spec.ts    | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/ng2-material/components/backdrop/backdrop.ts b/ng2-material/components/backdrop/backdrop.ts
index fef2ee88..4ec2294c 100644
--- a/ng2-material/components/backdrop/backdrop.ts
+++ b/ng2-material/components/backdrop/backdrop.ts
@@ -57,6 +57,7 @@ export class MdBackdrop {
 
 
   private _visible: boolean = false;
+  private _transitioning: boolean = false;
 
   /**
    * Read-only property indicating whether the backdrop is visible or not.
@@ -66,7 +67,7 @@ export class MdBackdrop {
   }
 
   onClick() {
-    if (this.clickClose && this.visible) {
+    if (this.clickClose && !this._transitioning && this.visible) {
       this.hide();
     }
   }
@@ -80,8 +81,10 @@ export class MdBackdrop {
       return Promise.resolve();
     }
     this._visible = true;
+    this._transitioning = true;
     this.onShowing.emit(this);
     return Animate.enter(this.element.nativeElement, 'md-active').then(() => {
+      this._transitioning = false;
       this.onShown.emit(this);
     });
   }
@@ -95,8 +98,10 @@ export class MdBackdrop {
       return Promise.resolve();
     }
     this._visible = false;
+    this._transitioning = true;
     this.onHiding.emit(this);
     return Animate.leave(this.element.nativeElement, 'md-active').then(() => {
+      this._transitioning = false;
       this.onHidden.emit(this);
     });
   }
diff --git a/test/components/backdrop/backdrop_spec.ts b/test/components/backdrop/backdrop_spec.ts
index 684540c7..95f1abca 100644
--- a/test/components/backdrop/backdrop_spec.ts
+++ b/test/components/backdrop/backdrop_spec.ts
@@ -96,6 +96,24 @@ export function main() {
             async.done();
           });
         }));
+        it('should not be clickable during transition animation', inject([AsyncTestCompleter], (async) => {
+          setup().then((api: IBackdropFixture) => {
+            let triggered = false;
+            api.backdrop.clickClose = true;
+            api.backdrop.hide = () => {
+              triggered = true;
+              return Promise.resolve();
+            };
+            api.backdrop.show().then(() => {
+              expect(triggered).toBe(false);
+              api.debug.nativeElement.click();
+              expect(triggered).toBe(true);
+            });
+            api.debug.nativeElement.click();
+            expect(triggered).toBe(false);
+            async.done();
+          });
+        }));
       });
       describe('show', () => {
         it('emit events before and after being shown', inject([AsyncTestCompleter], (async) => {