Skip to content

fix(material/tooltip): tooltip inside sidenav hides after text update #32980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yogeshwaran-c wants to merge 1 commit into from
Closed

fix(material/tooltip): tooltip inside sidenav hides after text update #32980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/material/tooltip/tooltip.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1214,6 +1214,29 @@ describe('MatTooltip', () => {
.withContext('Expected tooltip hidden when scrolled out of view, after throttle limit')
.toBe(false);
}));

it('should not hide tooltip when message is updated inside a scrollable container', fakeAsync(() => {
assertTooltipInstance(tooltipDirective, false);

// Show the tooltip and tick for the show delay (default is 0)
tooltipDirective.show();
fixture.detectChanges();
tick(0);

expect(tooltipDirective._isTooltipVisible())
.withContext('Expected tooltip to be initially visible')
.toBe(true);

// Update the tooltip message while visible
fixture.componentInstance.message = 'updated message';
fixture.detectChanges();
tick(0);

// The tooltip should remain visible after the message update
expect(tooltipDirective._isTooltipVisible())
.withContext('Expected tooltip to remain visible after message update')
.toBe(true);
}));
});

describe('with OnPush', () => {
Expand Down
9 changes: 8 additions & 1 deletion src/material/tooltip/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
private readonly _tooltipComponent = TooltipComponent;
private _viewportMargin = 8;
private _currentPosition!: TooltipPosition;
private _isRepositioningForMessage = false;
private readonly _cssClassPrefix: string = 'mat-mdc';
private _ariaDescriptionPending = false;
private _dirSubscribed = false;
Expand Down Expand Up @@ -529,7 +530,11 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
this._updateCurrentPositionClass(change.connectionPair);

if (this._tooltipInstance) {
if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
if (
change.scrollableViewProperties.isOverlayClipped &&
this._tooltipInstance.isVisible() &&
!this._isRepositioningForMessage
) {
// After position changes occur and the overlay is clipped by
// a parent scrollable then close the tooltip.
this._ngZone.run(() => this.hide(0));
Expand Down Expand Up @@ -703,7 +708,9 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
afterNextRender(
() => {
if (this._tooltipInstance) {
this._isRepositioningForMessage = true;
this._overlayRef!.updatePosition();
this._isRepositioningForMessage = false;
}
},
{
Expand Down