fix(material/tooltip): not updating position after direction changes (#22641)

Fixes that the tooltip won't update its position config if the directionality changes after it has been initialized.

Author: crisbeto

src/material-experimental/mdc-tooltip/BUILD.bazel

@@ -67,6 +67,7 @@ ng_test_library(
         "//src/cdk/testing/private",
         "@npm//@angular/animations",
         "@npm//@angular/platform-browser",
+        "@npm//rxjs",
     ],
 )
 

src/material-experimental/mdc-tooltip/tooltip.spec.ts

@@ -33,6 +33,7 @@ import {
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Subject} from 'rxjs';
 import {
   MAT_TOOLTIP_DEFAULT_OPTIONS,
   MatTooltip,
@@ -48,7 +49,7 @@ const initialTooltipMessage = 'initial tooltip message';
 describe('MDC-based MatTooltip', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let dir: {value: Direction};
+  let dir: {value: Direction, change: Subject<Direction>};
   let platform: Platform;
   let focusMonitor: FocusMonitor;
 
@@ -66,7 +67,7 @@ describe('MDC-based MatTooltip', () => {
       ],
       providers: [
         {provide: Directionality, useFactory: () => {
-          return dir = {value: 'ltr'};
+          return dir = {value: 'ltr', change: new Subject()};
         }}
       ]
     });
@@ -363,6 +364,19 @@ describe('MDC-based MatTooltip', () => {
       expect(tooltipDirective._overlayRef!.updatePosition).toHaveBeenCalled();
     }));
 
+    it('should update the tooltip position when the directionality changes', fakeAsync(() => {
+      tooltipDirective.position = 'right';
+      tooltipDirective.show();
+      tick();
+
+      assertTooltipInstance(tooltipDirective, true);
+      const spy = spyOn(tooltipDirective as any, '_updatePosition').and.callThrough();
+      dir.change.next('rtl');
+
+      assertTooltipInstance(tooltipDirective, true);
+      expect(spy).toHaveBeenCalled();
+    }));
+
     it('should not throw when updating the position for a closed tooltip', fakeAsync(() => {
       tooltipDirective.position = 'left';
       tooltipDirective.show(0);

src/material/tooltip/BUILD.bazel

@@ -68,6 +68,7 @@ ng_test_library(
         "//src/cdk/testing/private",
         "@npm//@angular/animations",
         "@npm//@angular/platform-browser",
+        "@npm//rxjs",
     ],
 )
 

src/material/tooltip/tooltip.spec.ts

@@ -33,6 +33,7 @@ import {
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Subject} from 'rxjs';
 import {
   MAT_TOOLTIP_DEFAULT_OPTIONS,
   MatTooltip,
@@ -48,7 +49,7 @@ const initialTooltipMessage = 'initial tooltip message';
 describe('MatTooltip', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let dir: {value: Direction};
+  let dir: {value: Direction, change: Subject<Direction>};
   let platform: Platform;
   let focusMonitor: FocusMonitor;
 
@@ -66,7 +67,7 @@ describe('MatTooltip', () => {
       ],
       providers: [
         {provide: Directionality, useFactory: () => {
-          return dir = {value: 'ltr'};
+          return dir = {value: 'ltr', change: new Subject()};
         }}
       ]
     });
@@ -362,6 +363,19 @@ describe('MatTooltip', () => {
       expect(tooltipDirective._overlayRef!.updatePosition).toHaveBeenCalled();
     }));
 
+    it('should update the tooltip position when the directionality changes', fakeAsync(() => {
+      tooltipDirective.position = 'right';
+      tooltipDirective.show();
+      tick();
+
+      assertTooltipInstance(tooltipDirective, true);
+      const spy = spyOn(tooltipDirective as any, '_updatePosition').and.callThrough();
+      dir.change.next('rtl');
+
+      assertTooltipInstance(tooltipDirective, true);
+      expect(spy).toHaveBeenCalled();
+    }));
+
     it('should not throw when updating the position for a closed tooltip', fakeAsync(() => {
       tooltipDirective.position = 'left';
       tooltipDirective.show(0);

src/material/tooltip/tooltip.ts

@@ -158,12 +158,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
       this._position = value;
 
       if (this._overlayRef) {
-        this._updatePosition();
-
-        if (this._tooltipInstance) {
-          this._tooltipInstance!.show(0);
-        }
-
+        this._updatePosition(this._overlayRef);
+        this._tooltipInstance?.show(0);
         this._overlayRef.updatePosition();
       }
     }
@@ -284,6 +280,12 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
       }
     }
 
+    _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+      if (this._overlayRef) {
+        this._updatePosition(this._overlayRef);
+      }
+    });
+
     _ngZone.runOutsideAngular(() => {
       _elementRef.nativeElement.addEventListener('keydown', this._handleKeydown);
     });
@@ -418,7 +420,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
       scrollStrategy: this._scrollStrategy()
     });
 
-    this._updatePosition();
+    this._updatePosition(this._overlayRef);
 
     this._overlayRef.detachments()
       .pipe(takeUntil(this._destroyed))
@@ -437,9 +439,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
   }
 
   /** Updates the position of the current tooltip. */
-  private _updatePosition() {
-    const position =
-        this._overlayRef!.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
+  private _updatePosition(overlayRef: OverlayRef) {
+    const position = overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
     const origin = this._getOrigin();
     const overlay = this._getOverlayPosition();