fix(tooltip): not closing if escape is pressed while trigger isn't focused

Currently the tooltip's `keydown` handler is on the trigger, which means that it won't fire if the trigger doesn't have focus. This could happen when a tooltip was opened by hovering over the trigger. These changes use the `OverlayKeyboardDispatcher` to handle the events instead.

Fixes #14278.

Author: crisbeto

src/material/tooltip/tooltip.spec.ts

@@ -640,9 +640,28 @@ describe('MatTooltip', () => {
       expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
     }));
 
+    it('should hide when pressing escape', fakeAsync(() => {
+      tooltipDirective.show();
+      tick(0);
+      fixture.detectChanges();
+      tick(500);
+
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+      expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
+
+      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+      tick(0);
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(tooltipDirective._isTooltipVisible()).toBe(false);
+      expect(overlayContainerElement.textContent).toBe('');
+    }));
+
     it('should not throw when pressing ESCAPE', fakeAsync(() => {
       expect(() => {
-        dispatchKeyboardEvent(buttonElement, 'keydown', ESCAPE);
+        dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
         fixture.detectChanges();
       }).not.toThrow();
 
@@ -655,7 +674,7 @@ describe('MatTooltip', () => {
       tick(0);
       fixture.detectChanges();
 
-      const event = dispatchKeyboardEvent(buttonElement, 'keydown', ESCAPE);
+      const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       fixture.detectChanges();
       flush();
 
@@ -669,7 +688,7 @@ describe('MatTooltip', () => {
 
       const event = createKeyboardEvent('keydown', ESCAPE);
       Object.defineProperty(event, 'altKey', {get: () => true});
-      dispatchEvent(buttonElement, event);
+      dispatchEvent(document.body, event);
       fixture.detectChanges();
       flush();
 

src/material/tooltip/tooltip.ts

@@ -131,9 +131,6 @@ export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions
 @Directive({
   selector: '[matTooltip]',
   exportAs: 'matTooltip',
-  host: {
-    '(keydown)': '_handleKeydown($event)',
-  },
 })
 export class MatTooltip implements OnDestroy, OnInit {
   _overlayRef: OverlayRef | null;
@@ -356,15 +353,6 @@ export class MatTooltip implements OnDestroy, OnInit {
     return !!this._tooltipInstance && this._tooltipInstance.isVisible();
   }
 
-  /** Handles the keydown events on the host element. */
-  _handleKeydown(e: KeyboardEvent) {
-    if (this._isTooltipVisible() && e.keyCode === ESCAPE && !hasModifierKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.hide(0);
-    }
-  }
-
   /** Create the overlay config and position strategy */
   private _createOverlay(): OverlayRef {
     if (this._overlayRef) {
@@ -392,7 +380,7 @@ export class MatTooltip implements OnDestroy, OnInit {
       }
     });
 
-    this._overlayRef = this._overlay.create({
+    const overlayRef = this._overlayRef = this._overlay.create({
       direction: this._dir,
       positionStrategy: strategy,
       panelClass: TOOLTIP_PANEL_CLASS,
@@ -401,11 +389,21 @@ export class MatTooltip implements OnDestroy, OnInit {
 
     this._updatePosition();
 
-    this._overlayRef.detachments()
+    overlayRef.keydownEvents()
+      .pipe(takeUntil(this._destroyed))
+      .subscribe(event => {
+        if (this._isTooltipVisible() && event.keyCode === ESCAPE && !hasModifierKey(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.hide(0);
+        }
+      });
+
+    overlayRef.detachments()
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => this._detach());
 
-    return this._overlayRef;
+    return overlayRef;
   }
 
   /** Detaches the currently-attached tooltip. */

tools/public_api_guard/material/tooltip.d.ts

@@ -36,7 +36,6 @@ export declare class MatTooltip implements OnDestroy, OnInit {
         main: OverlayConnectionPosition;
         fallback: OverlayConnectionPosition;
     };
-    _handleKeydown(e: KeyboardEvent): void;
     _isTooltipVisible(): boolean;
     hide(delay?: number): void;
     ngOnDestroy(): void;