fix(tooltip): not handling direction changes after the first open (#11324)

Fixes the tooltip's direction not changing after the first time it's opened. Also trims down some duplicated logic.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -21,6 +21,9 @@ export type ImmutableObject<T> = {
   readonly [P in keyof T]: T[P];
 };
 
+// TODO(crisbeto): add support for passing in a `Directionality`
+// to make syncing the direction easier.
+
 /**
  * Reference to an overlay that has been created with the Overlay service.
  * Used to manipulate or dispose of said overlay.

src/lib/tooltip/tooltip.spec.ts

@@ -503,6 +503,28 @@ describe('MatTooltip', () => {
       expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.');
     }));
 
+    it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => {
+      dir.value = 'rtl';
+      tooltipDirective.show();
+      tick();
+      fixture.detectChanges();
+
+      let tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL.');
+
+      tooltipDirective.hide(0);
+      tick();
+      fixture.detectChanges();
+
+      dir.value = 'ltr';
+      tooltipDirective.show();
+      tick();
+      fixture.detectChanges();
+
+      tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      expect(tooltipWrapper.getAttribute('dir')).toBe('ltr', 'Expected tooltip to be in LTR.');
+    }));
+
     it('should be able to set the tooltip message as a number', fakeAsync(() => {
       fixture.componentInstance.message = 100;
       fixture.detectChanges();

src/lib/tooltip/tooltip.ts

@@ -264,6 +264,7 @@ export class MatTooltip implements OnDestroy {
     const overlayRef = this._createOverlay();
 
     this._detach();
+    overlayRef.setDirection(this._dir ? this._dir.value : 'ltr');
     this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef);
     this._tooltipInstance = overlayRef.attach(this._portal).instance;
     this._tooltipInstance.afterHidden()
@@ -310,20 +311,12 @@ export class MatTooltip implements OnDestroy {
       return this._overlayRef;
     }
 
-    const origin = this._getOrigin();
-    const overlay = this._getOverlayPosition();
-    const direction = this._dir ? this._dir.value : 'ltr';
-
     // Create connected position strategy that listens for scroll events to reposition.
     const strategy = this._overlay.position()
       .flexibleConnectedTo(this._elementRef)
       .withTransformOriginOn('.mat-tooltip')
       .withFlexibleDimensions(false)
-      .withViewportMargin(8)
-      .withPositions([
-        {...origin.main, ...overlay.main},
-        {...origin.fallback, ...overlay.fallback}
-      ]);
+      .withViewportMargin(8);
 
     const scrollableAncestors = this._scrollDispatcher
       .getAncestorScrollContainers(this._elementRef);
@@ -341,12 +334,13 @@ export class MatTooltip implements OnDestroy {
     });
 
     this._overlayRef = this._overlay.create({
-      direction,
       positionStrategy: strategy,
       panelClass: TOOLTIP_PANEL_CLASS,
       scrollStrategy: this._scrollStrategy()
     });
 
+    this._updatePosition();
+
     this._overlayRef.detachments()
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => this._detach());
@@ -370,11 +364,10 @@ export class MatTooltip implements OnDestroy {
     const origin = this._getOrigin();
     const overlay = this._getOverlayPosition();
 
-    position
-      .withPositions([
-        {...origin.main, ...overlay.main},
-        {...origin.fallback, ...overlay.fallback}
-      ]);
+    position.withPositions([
+      {...origin.main, ...overlay.main},
+      {...origin.fallback, ...overlay.fallback}
+    ]);
   }
 
   /**