fix(overlay): incorrect position when using flexible positioning and rtl on the body (#11393)

Fixes the flexible positioning not working correctly when the consumer's `dir` is set on the `body` or `html` tags. The issue comes from the fact that we set the overlay's `dir` on the overlay pane which leaves the bounding box with the default of `ltr`. When the consumer sets the `dir` on the `body`, it'll propagate down to the bounding box, causing its flexbox alignment properties to be inverted. These changes move the `dir` to the bounding box and stop inverting the `align-items` and `justify-content` in rtl.

Fixes #11387.

Author: crisbeto

src/cdk-experimental/dialog/dialog.spec.ts

@@ -516,7 +516,7 @@ describe('Dialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
 
     expect(overlayPane.getAttribute('dir')).toBe('rtl');
   });

src/cdk/overlay/overlay-directives.spec.ts

@@ -91,7 +91,10 @@ describe('Overlay directives', () => {
     fixture.componentInstance.isOpen = true;
     fixture.detectChanges();
 
-    expect(getPaneElement().getAttribute('dir')).toBe('rtl');
+    let boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+
+    expect(boundingBox.getAttribute('dir')).toBe('rtl');
 
     fixture.componentInstance.isOpen = false;
     fixture.detectChanges();
@@ -100,7 +103,10 @@ describe('Overlay directives', () => {
     fixture.componentInstance.isOpen = true;
     fixture.detectChanges();
 
-    expect(getPaneElement().getAttribute('dir')).toBe('ltr');
+    boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+
+    expect(boundingBox.getAttribute('dir')).toBe('ltr');
   });
 
   it('should close when pressing escape', () => {

src/cdk/overlay/overlay-ref.ts

@@ -249,7 +249,7 @@ export class OverlayRef implements PortalOutlet {
 
   /** Updates the text direction of the overlay panel. */
   private _updateElementDirection() {
-    this._pane.setAttribute('dir', this._config.direction!);
+    this._host.setAttribute('dir', this._config.direction!);
   }
 
   /** Updates the size of the overlay element based on the overlay config. */

src/cdk/overlay/overlay.spec.ts

@@ -155,7 +155,7 @@ describe('Overlay', () => {
     const overlayRef = overlay.create();
 
     overlayRef.attach(componentPortal);
-    expect(overlayRef.overlayElement.getAttribute('dir')).toBe('rtl');
+    expect(overlayRef.hostElement.getAttribute('dir')).toBe('rtl');
   });
 
   it('should set the direction', () => {
@@ -164,7 +164,7 @@ describe('Overlay', () => {
 
     overlayRef.attach(componentPortal);
 
-    expect(overlayRef.overlayElement.getAttribute('dir')).toEqual('rtl');
+    expect(overlayRef.hostElement.getAttribute('dir')).toEqual('rtl');
   });
 
   it('should emit when an overlay is attached', () => {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -720,8 +720,6 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       // Push the pane content towards the proper direction.
       if (position.overlayX === 'center') {
         styles.alignItems = 'center';
-      } else if (this._isRtl()) {
-        styles.alignItems = position.overlayX === 'end' ? 'flex-start' : 'flex-end';
       } else {
         styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';
       }

src/lib/autocomplete/autocomplete.spec.ts

@@ -481,8 +481,9 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+    const boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
   });
 
   it('should update the panel direction if it changes for the trigger', () => {
@@ -495,8 +496,9 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+    let boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
 
     rtlFixture.componentInstance.trigger.closePanel();
     rtlFixture.detectChanges();
@@ -505,8 +507,9 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('ltr');
+    boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('ltr');
   });
 
   describe('forms integration', () => {

src/lib/bottom-sheet/bottom-sheet.spec.ts

@@ -211,7 +211,7 @@ describe('MatBottomSheet', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
 
     expect(overlayPane.getAttribute('dir')).toBe('rtl');
   });

src/lib/datepicker/datepicker.spec.ts

@@ -1312,7 +1312,7 @@ describe('MatDatepicker', () => {
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
-        const overlay = document.querySelector('.cdk-overlay-pane')!;
+        const overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
 
         expect(overlay.getAttribute('dir')).toBe('rtl');
       });
@@ -1328,7 +1328,7 @@ describe('MatDatepicker', () => {
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
-        let overlay = document.querySelector('.cdk-overlay-pane')!;
+        let overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
 
         expect(overlay.getAttribute('dir')).toBe('ltr');
 
@@ -1340,7 +1340,7 @@ describe('MatDatepicker', () => {
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
-        overlay = document.querySelector('.cdk-overlay-pane')!;
+        overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
 
         expect(overlay.getAttribute('dir')).toBe('rtl');
       }));
@@ -1356,7 +1356,7 @@ describe('MatDatepicker', () => {
         fixture.componentInstance.datepicker.open();
         fixture.detectChanges();
 
-        const overlay = document.querySelector('.cdk-overlay-pane')!;
+        const overlay = document.querySelector('.cdk-global-overlay-wrapper')!;
 
         expect(overlay.getAttribute('dir')).toBe('rtl');
       });

src/lib/dialog/dialog.spec.ts

@@ -517,7 +517,7 @@ describe('MatDialog', () => {
 
     viewContainerFixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+    let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
 
     expect(overlayPane.getAttribute('dir')).toBe('rtl');
   });

src/lib/menu/menu.spec.ts

@@ -241,8 +241,9 @@ describe('MatMenu', () => {
     fixture.componentInstance.trigger.openMenu();
     fixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+    const boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
   });
 
   it('should update the panel direction if the trigger direction changes', () => {
@@ -255,8 +256,9 @@ describe('MatMenu', () => {
     fixture.componentInstance.trigger.openMenu();
     fixture.detectChanges();
 
-    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+    let boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
 
     fixture.componentInstance.trigger.closeMenu();
     fixture.detectChanges();
@@ -265,8 +267,9 @@ describe('MatMenu', () => {
     fixture.componentInstance.trigger.openMenu();
     fixture.detectChanges();
 
-    overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
-    expect(overlayPane.getAttribute('dir')).toEqual('ltr');
+    boundingBox =
+        overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+    expect(boundingBox.getAttribute('dir')).toEqual('ltr');
   });
 
   it('should transfer any custom classes from the host to the overlay', () => {