fix(overlay): global overlay incorrectly handling left/right position when RTL is set on body (#11412)

We use `justify-content` to position global overlay to the left or right, however `justify-content` gets inverted when the element is in RTL. Since our methods are called explicitly `left` and `right`, the expectation is that the element would stay to the left or right, no matter what the direction is. This is an issue if the `dir` is set on the `body` or `html` tags, because it'll end up propagating down to the overlay wrapper, causing its directions to be inverted. These changes invert `justify-content` in RTL, in order to ensure that the overlay behaves as expected.

Relates to #11393.

Author: crisbeto

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -270,6 +270,25 @@ describe('GlobalPositonStrategy', () => {
       expect(elementStyle.height).toBe('300px');
     });
 
+  it('should invert `justify-content` when using `left` in RTL', () => {
+    attachOverlay({
+      positionStrategy: overlay.position().global().left('0'),
+      direction: 'rtl'
+    });
+
+    const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+    expect(parentStyle.justifyContent).toBe('flex-end');
+  });
+
+  it('should invert `justify-content` when using `right` in RTL', () => {
+    attachOverlay({
+      positionStrategy: overlay.position().global().right('0'),
+      direction: 'rtl'
+    });
+
+    const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+    expect(parentStyle.justifyContent).toBe('flex-start');
+  });
 });
 
 

src/cdk/overlay/position/global-position-strategy.ts

@@ -167,7 +167,22 @@ export class GlobalPositionStrategy implements PositionStrategy {
     styles.marginBottom = this._bottomOffset;
     styles.marginRight = this._rightOffset;
 
-    parentStyles.justifyContent = config.width === '100%' ? 'flex-start' : this._justifyContent;
+    if (config.width === '100%') {
+      parentStyles.justifyContent = 'flex-start';
+    } else if (this._overlayRef.getConfig().direction === 'rtl') {
+      // In RTL the browser will invert `flex-start` and `flex-end` automatically, but we
+      // don't want that because our positioning is explicitly `left` and `right`, hence
+      // why we do another inversion to ensure that the overlay stays in the same position.
+      // TODO: reconsider this if we add `start` and `end` methods.
+      if (this._justifyContent === 'flex-start') {
+        parentStyles.justifyContent = 'flex-end';
+      } else if (this._justifyContent === 'flex-end') {
+        parentStyles.justifyContent = 'flex-start';
+      }
+    } else {
+      parentStyles.justifyContent = this._justifyContent;
+    }
+
     parentStyles.alignItems = config.height === '100%' ? 'flex-start' : this._alignItems;
   }