Popover hover close fix

src/modules/popover/popover.directive.spec.ts

@@ -147,32 +147,21 @@ describe('SkyPopoverDirective', () => {
   it('should mark the popover to close on mouseleave', () => {
     const caller = directiveElements[2];
     const callerInstance = caller.injector.get(SkyPopoverDirective);
-    const popoverSpy = spyOn(callerInstance.skyPopover, 'markForCloseOnMouseLeave');
     const closeSpy = spyOn((callerInstance as any), 'closePopover').and.callThrough();
 
     callerInstance.skyPopover.isOpen = true;
     callerInstance.skyPopover.isMouseEnter = true;
 
     SkyAppTestUtility.fireDomEvent(caller.nativeElement, 'mouseleave');
-    expect(popoverSpy).not.toHaveBeenCalled();
     expect(closeSpy).toHaveBeenCalled();
 
-    popoverSpy.calls.reset();
     closeSpy.calls.reset();
 
     // Else path, popover has mouseenter.
-    callerInstance.skyPopover.isOpen = true;
-    spyOn(mockWindowService, 'getWindow').and.returnValue({
-      setTimeout(callback: Function) {
-        // Simulate the popover triggering mouseenter event:
-        callerInstance.skyPopover.isMouseEnter = true;
-        callback();
-      }
-    });
-
+    callerInstance.skyPopover.isOpen = false;
     SkyAppTestUtility.fireDomEvent(caller.nativeElement, 'mouseleave');
-    expect(popoverSpy).toHaveBeenCalledWith();
-    expect(closeSpy).not.toHaveBeenCalled();
+    callerInstance.skyPopover.popoverOpened.emit();
+    expect(closeSpy).toHaveBeenCalled();
   });
 
   it('should close the popover when the escape key is pressed', () => {

src/modules/popover/popover.directive.ts

@@ -12,10 +12,6 @@ import 'rxjs/add/observable/fromEvent';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
 
-import {
-  SkyWindowRefService
-} from '../window';
-
 import {
   SkyPopoverAlignment,
   SkyPopoverPlacement,
@@ -43,8 +39,7 @@ export class SkyPopoverDirective implements OnChanges, OnDestroy {
   private idled = new Subject<boolean>();
 
   constructor(
-    private elementRef: ElementRef,
-    private windowRef: SkyWindowRefService
+    private elementRef: ElementRef
   ) { }
 
   public ngOnChanges(changes: SimpleChanges) {
@@ -120,7 +115,7 @@ export class SkyPopoverDirective implements OnChanges, OnDestroy {
         }
       });
 
-    Observable
+      Observable
       .fromEvent(element, 'mouseleave')
       .takeUntil(this.idled)
       .subscribe((event: MouseEvent) => {
@@ -129,17 +124,15 @@ export class SkyPopoverDirective implements OnChanges, OnDestroy {
         if (this.skyPopoverTrigger === 'mouseenter') {
           event.preventDefault();
 
-          // Give the popover a chance to set its isMouseEnter flag before checking to see
-          // if it should be closed.
-          this.windowRef.getWindow().setTimeout(() => {
-            if (this.isPopoverOpen()) {
-              if (this.skyPopover.isMouseEnter) {
-                this.skyPopover.markForCloseOnMouseLeave();
-              } else {
-                this.closePopover();
-              }
-            }
-          });
+          if (this.skyPopover.isOpen) {
+            this.closePopover();
+          } else {
+            // If the mouse leaves before the popover is open,
+            // wait for the transition to complete before closing it.
+            this.skyPopover.popoverOpened.take(1).subscribe(() => {
+              this.closePopover();
+            });
+          }
         }
       });
   }