Skip to content

Commit

Permalink
fix(tooltip): don't open from programmatic focus (#7258)
Browse files Browse the repository at this point in the history
Prevents the tooltip from opening when its trigger is focused programmatically.

Fixes #7245.
  • Loading branch information
crisbeto authored and andrewseguin committed Oct 9, 2017
1 parent 3e3ef2a commit 90a55fa
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 4 deletions.
14 changes: 14 additions & 0 deletions src/lib/tooltip/tooltip.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -485,8 +485,22 @@ describe('MatTooltip', () => {
dispatchKeyboardEvent(buttonElement, 'keydown', ESCAPE);
fixture.detectChanges();
}).not.toThrow();

tick(0);
}));

it('should not show the tooltip on progammatic focus', fakeAsync(() => {
expect(tooltipDirective._tooltipInstance).toBeUndefined();

buttonElement.focus();
tick(0);
fixture.detectChanges();
tick(500);

expect(overlayContainerElement.querySelector('.mat-tooltip')).toBeNull();
}));


});

describe('fallback positions', () => {
Expand Down
17 changes: 13 additions & 4 deletions src/lib/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
import {AriaDescriber} from '@angular/cdk/a11y';
import {AriaDescriber, FocusMonitor} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {ESCAPE} from '@angular/cdk/keycodes';
Expand Down Expand Up @@ -90,8 +89,6 @@ export const MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER = {
exportAs: 'matTooltip',
host: {
'(longpress)': 'show()',
'(focus)': 'show()',
'(blur)': 'hide(0)',
'(keydown)': '_handleKeydown($event)',
'(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
},
Expand Down Expand Up @@ -177,6 +174,7 @@ export class MatTooltip implements OnDestroy {
private _ngZone: NgZone,
private _platform: Platform,
private _ariaDescriber: AriaDescriber,
private _focusMonitor: FocusMonitor,
@Inject(MAT_TOOLTIP_SCROLL_STRATEGY) private _scrollStrategy,
@Optional() private _dir: Directionality) {

Expand All @@ -188,6 +186,15 @@ export class MatTooltip implements OnDestroy {
this._leaveListener =
renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide());
}

_focusMonitor.monitor(_elementRef.nativeElement, renderer, false).subscribe(origin => {
// Note that the focus monitor runs outside the Angular zone.
if (!origin) {
_ngZone.run(() => this.hide(0));
} else if (origin !== 'program') {
_ngZone.run(() => this.show());
}
});
}

/**
Expand All @@ -197,13 +204,15 @@ export class MatTooltip implements OnDestroy {
if (this._tooltipInstance) {
this._disposeTooltip();
}

// Clean up the event listeners set in the constructor
if (!this._platform.IOS) {
this._enterListener();
this._leaveListener();
}

this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
}

/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
Expand Down

0 comments on commit 90a55fa

Please sign in to comment.