fix(tooltip): don't open for mouse and touch focus (#10728)

Author: crisbeto

src/lib/tooltip/tooltip.spec.ts

@@ -21,8 +21,9 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {OverlayContainer, OverlayModule, CdkScrollable} from '@angular/cdk/overlay';
 import {Platform} from '@angular/cdk/platform';
-import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {dispatchFakeEvent, dispatchKeyboardEvent, patchElementFocus} from '@angular/cdk/testing';
 import {ESCAPE} from '@angular/cdk/keycodes';
+import {FocusMonitor} from '@angular/cdk/a11y';
 import {
   MatTooltip,
   MatTooltipModule,
@@ -39,6 +40,7 @@ describe('MatTooltip', () => {
   let overlayContainerElement: HTMLElement;
   let dir: {value: Direction};
   let platform: {IOS: boolean, isBrowser: boolean};
+  let focusMonitor: FocusMonitor;
 
   beforeEach(async(() => {
     // Set the default Platform override that can be updated before component creation.
@@ -63,9 +65,10 @@ describe('MatTooltip', () => {
 
     TestBed.compileComponents();
 
-    inject([OverlayContainer], (oc: OverlayContainer) => {
+    inject([OverlayContainer, FocusMonitor], (oc: OverlayContainer, fm: FocusMonitor) => {
       overlayContainer = oc;
       overlayContainerElement = oc.getContainerElement();
+      focusMonitor = fm;
     })();
   }));
 
@@ -576,16 +579,40 @@ describe('MatTooltip', () => {
     }));
 
     it('should not show the tooltip on progammatic focus', fakeAsync(() => {
+      patchElementFocus(buttonElement);
       assertTooltipInstance(tooltipDirective, false);
 
-      buttonElement.focus();
+      focusMonitor.focusVia(buttonElement, 'program');
       tick(0);
       fixture.detectChanges();
       tick(500);
 
       expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
     }));
 
+    it('should not show the tooltip on mouse focus', fakeAsync(() => {
+      patchElementFocus(buttonElement);
+      assertTooltipInstance(tooltipDirective, false);
+
+      focusMonitor.focusVia(buttonElement, 'mouse');
+      tick(0);
+      fixture.detectChanges();
+      tick(500);
+
+      expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
+    }));
+
+    it('should not show the tooltip on touch focus', fakeAsync(() => {
+      patchElementFocus(buttonElement);
+      assertTooltipInstance(tooltipDirective, false);
+
+      focusMonitor.focusVia(buttonElement, 'touch');
+      tick(0);
+      fixture.detectChanges();
+      tick(500);
+
+      expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
+    }));
 
   });
 

src/lib/tooltip/tooltip.ts

@@ -227,7 +227,7 @@ export class MatTooltip implements OnDestroy {
       // Note that the focus monitor runs outside the Angular zone.
       if (!origin) {
         _ngZone.run(() => this.hide(0));
-      } else if (origin !== 'program') {
+      } else if (origin === 'keyboard') {
         _ngZone.run(() => this.show());
       }
     });