Skip to content

Commit

Permalink
perf(tooltip): Defer hooking up events until there's a message and th…
Browse files Browse the repository at this point in the history
…e tooltip is not disabled (#19764)

* perf(tooltip): Defer hooking up events until there's a message and the tooltip is not disabled

* comment update
  • Loading branch information
kseamon authored Jul 14, 2020
1 parent 223caaa commit 49de56c
Showing 1 changed file with 14 additions and 1 deletion.
15 changes: 14 additions & 1 deletion src/material/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
private _disabled: boolean = false;
private _tooltipClass: string|string[]|Set<string>|{[key: string]: any};
private _scrollStrategy: () => ScrollStrategy;
private _viewInitialized = false;

/** Allows the user to define the position of the tooltip relative to the parent element */
@Input('matTooltipPosition')
Expand Down Expand Up @@ -173,6 +174,8 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
// If tooltip is disabled, hide immediately.
if (this._disabled) {
this.hide(0);
} else {
this._setupPointerEvents();
}
}

Expand Down Expand Up @@ -202,14 +205,17 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
@Input('matTooltip')
get message() { return this._message; }
set message(value: string) {
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
if (this._message) {
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
}

// If the message is not a string (e.g. number), convert it to a string and trim it.
this._message = value != null ? `${value}`.trim() : '';

if (!this._message && this._isTooltipVisible()) {
this.hide(0);
} else {
this._setupPointerEvents();
this._updateTooltipMessage();
this._ngZone.runOutsideAngular(() => {
// The `AriaDescriber` has some functionality that avoids adding a description if it's the
Expand Down Expand Up @@ -276,6 +282,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {

ngAfterViewInit() {
// This needs to happen after view init so the initial values for all inputs have been set.
this._viewInitialized = true;
this._setupPointerEvents();

this._focusMonitor.monitor(this._elementRef)
Expand Down Expand Up @@ -543,6 +550,12 @@ export class MatTooltip implements OnDestroy, AfterViewInit {

/** Binds the pointer events to the tooltip trigger. */
private _setupPointerEvents() {
// Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
if (this._disabled || !this.message || !this._viewInitialized ||
this._passiveListeners.size) {
return;
}

// The mouse events shouldn't be bound on mobile devices, because they can prevent the
// first tap from firing its click event or can cause the tooltip to open for clicks.
if (!this._platform.IOS && !this._platform.ANDROID) {
Expand Down

1 comment on commit 49de56c

@narendrasinghrathore
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great.

Please sign in to comment.