Skip to content

Commit cfa8c65

Browse files
crisbetommalerba
crisbeto
authored and
mmalerba
committed
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.
1 parent b6f123e commit cfa8c65

File tree

12 files changed

+43
-30
lines changed

12 files changed

+43
-30
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,7 @@ describe('Dialog', () => {
516516

517517
viewContainerFixture.detectChanges();
518518

519-
let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
519+
let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
520520

521521
expect(overlayPane.getAttribute('dir')).toBe('rtl');
522522
});

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ describe('Overlay directives', () => {
9191
fixture.componentInstance.isOpen = true;
9292
fixture.detectChanges();
9393

94-
expect(getPaneElement().getAttribute('dir')).toBe('rtl');
94+
let boundingBox =
95+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
96+
97+
expect(boundingBox.getAttribute('dir')).toBe('rtl');
9598

9699
fixture.componentInstance.isOpen = false;
97100
fixture.detectChanges();
@@ -100,7 +103,10 @@ describe('Overlay directives', () => {
100103
fixture.componentInstance.isOpen = true;
101104
fixture.detectChanges();
102105

103-
expect(getPaneElement().getAttribute('dir')).toBe('ltr');
106+
boundingBox =
107+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
108+
109+
expect(boundingBox.getAttribute('dir')).toBe('ltr');
104110
});
105111

106112
it('should close when pressing escape', () => {

‎src/cdk/overlay/overlay-ref.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export class OverlayRef implements PortalOutlet {
249249

250250
/** Updates the text direction of the overlay panel. */
251251
private _updateElementDirection() {
252-
this._pane.setAttribute('dir', this._config.direction!);
252+
this._host.setAttribute('dir', this._config.direction!);
253253
}
254254

255255
/** Updates the size of the overlay element based on the overlay config. */

‎src/cdk/overlay/overlay.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ describe('Overlay', () => {
155155
const overlayRef = overlay.create();
156156

157157
overlayRef.attach(componentPortal);
158-
expect(overlayRef.overlayElement.getAttribute('dir')).toBe('rtl');
158+
expect(overlayRef.hostElement.getAttribute('dir')).toBe('rtl');
159159
});
160160

161161
it('should set the direction', () => {
@@ -164,7 +164,7 @@ describe('Overlay', () => {
164164

165165
overlayRef.attach(componentPortal);
166166

167-
expect(overlayRef.overlayElement.getAttribute('dir')).toEqual('rtl');
167+
expect(overlayRef.hostElement.getAttribute('dir')).toEqual('rtl');
168168
});
169169

170170
it('should emit when an overlay is attached', () => {

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -720,8 +720,6 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
720720
// Push the pane content towards the proper direction.
721721
if (position.overlayX === 'center') {
722722
styles.alignItems = 'center';
723-
} else if (this._isRtl()) {
724-
styles.alignItems = position.overlayX === 'end' ? 'flex-start' : 'flex-end';
725723
} else {
726724
styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';
727725
}

‎src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -481,8 +481,9 @@ describe('MatAutocomplete', () => {
481481
rtlFixture.componentInstance.trigger.openPanel();
482482
rtlFixture.detectChanges();
483483

484-
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
485-
expect(overlayPane.getAttribute('dir')).toEqual('rtl');
484+
const boundingBox =
485+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
486+
expect(boundingBox.getAttribute('dir')).toEqual('rtl');
486487
});
487488

488489
it('should update the panel direction if it changes for the trigger', () => {
@@ -495,8 +496,9 @@ describe('MatAutocomplete', () => {
495496
rtlFixture.componentInstance.trigger.openPanel();
496497
rtlFixture.detectChanges();
497498

498-
let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
499-
expect(overlayPane.getAttribute('dir')).toEqual('rtl');
499+
let boundingBox =
500+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
501+
expect(boundingBox.getAttribute('dir')).toEqual('rtl');
500502

501503
rtlFixture.componentInstance.trigger.closePanel();
502504
rtlFixture.detectChanges();
@@ -505,8 +507,9 @@ describe('MatAutocomplete', () => {
505507
rtlFixture.componentInstance.trigger.openPanel();
506508
rtlFixture.detectChanges();
507509

508-
overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
509-
expect(overlayPane.getAttribute('dir')).toEqual('ltr');
510+
boundingBox =
511+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
512+
expect(boundingBox.getAttribute('dir')).toEqual('ltr');
510513
});
511514

512515
describe('forms integration', () => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ describe('MatBottomSheet', () => {
211211

212212
viewContainerFixture.detectChanges();
213213

214-
let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
214+
let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
215215

216216
expect(overlayPane.getAttribute('dir')).toBe('rtl');
217217
});

‎src/lib/datepicker/datepicker.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1312,7 +1312,7 @@ describe('MatDatepicker', () => {
13121312
fixture.componentInstance.datepicker.open();
13131313
fixture.detectChanges();
13141314

1315-
const overlay = document.querySelector('.cdk-overlay-pane')!;
1315+
const overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
13161316

13171317
expect(overlay.getAttribute('dir')).toBe('rtl');
13181318
});
@@ -1328,7 +1328,7 @@ describe('MatDatepicker', () => {
13281328
fixture.componentInstance.datepicker.open();
13291329
fixture.detectChanges();
13301330

1331-
let overlay = document.querySelector('.cdk-overlay-pane')!;
1331+
let overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
13321332

13331333
expect(overlay.getAttribute('dir')).toBe('ltr');
13341334

@@ -1340,7 +1340,7 @@ describe('MatDatepicker', () => {
13401340
fixture.componentInstance.datepicker.open();
13411341
fixture.detectChanges();
13421342

1343-
overlay = document.querySelector('.cdk-overlay-pane')!;
1343+
overlay = document.querySelector('.cdk-overlay-connected-position-bounding-box')!;
13441344

13451345
expect(overlay.getAttribute('dir')).toBe('rtl');
13461346
}));
@@ -1356,7 +1356,7 @@ describe('MatDatepicker', () => {
13561356
fixture.componentInstance.datepicker.open();
13571357
fixture.detectChanges();
13581358

1359-
const overlay = document.querySelector('.cdk-overlay-pane')!;
1359+
const overlay = document.querySelector('.cdk-global-overlay-wrapper')!;
13601360

13611361
expect(overlay.getAttribute('dir')).toBe('rtl');
13621362
});

‎src/lib/dialog/dialog.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,7 @@ describe('MatDialog', () => {
517517

518518
viewContainerFixture.detectChanges();
519519

520-
let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
520+
let overlayPane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
521521

522522
expect(overlayPane.getAttribute('dir')).toBe('rtl');
523523
});

‎src/lib/menu/menu.spec.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -241,8 +241,9 @@ describe('MatMenu', () => {
241241
fixture.componentInstance.trigger.openMenu();
242242
fixture.detectChanges();
243243

244-
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
245-
expect(overlayPane.getAttribute('dir')).toEqual('rtl');
244+
const boundingBox =
245+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
246+
expect(boundingBox.getAttribute('dir')).toEqual('rtl');
246247
});
247248

248249
it('should update the panel direction if the trigger direction changes', () => {
@@ -255,8 +256,9 @@ describe('MatMenu', () => {
255256
fixture.componentInstance.trigger.openMenu();
256257
fixture.detectChanges();
257258

258-
let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
259-
expect(overlayPane.getAttribute('dir')).toEqual('rtl');
259+
let boundingBox =
260+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
261+
expect(boundingBox.getAttribute('dir')).toEqual('rtl');
260262

261263
fixture.componentInstance.trigger.closeMenu();
262264
fixture.detectChanges();
@@ -265,8 +267,9 @@ describe('MatMenu', () => {
265267
fixture.componentInstance.trigger.openMenu();
266268
fixture.detectChanges();
267269

268-
overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
269-
expect(overlayPane.getAttribute('dir')).toEqual('ltr');
270+
boundingBox =
271+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
272+
expect(boundingBox.getAttribute('dir')).toEqual('ltr');
270273
});
271274

272275
it('should transfer any custom classes from the host to the overlay', () => {

‎src/lib/snack-bar/snack-bar.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ describe('MatSnackBar', () => {
391391
snackBar.open(simpleMessage, simpleActionLabel, { direction: 'rtl' });
392392
viewContainerFixture.detectChanges();
393393

394-
let pane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
394+
let pane = overlayContainerElement.querySelector('.cdk-global-overlay-wrapper')!;
395395

396396
expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.');
397397
});

‎src/lib/tooltip/tooltip.spec.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,8 @@ describe('MatTooltip', () => {
497497
tick(0);
498498
fixture.detectChanges();
499499

500-
const tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
500+
const tooltipWrapper =
501+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
501502

502503
expect(tooltipWrapper).toBeTruthy('Expected tooltip to be shown.');
503504
expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.');
@@ -509,7 +510,8 @@ describe('MatTooltip', () => {
509510
tick();
510511
fixture.detectChanges();
511512

512-
let tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
513+
let tooltipWrapper =
514+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
513515
expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL.');
514516

515517
tooltipDirective.hide(0);
@@ -521,7 +523,8 @@ describe('MatTooltip', () => {
521523
tick();
522524
fixture.detectChanges();
523525

524-
tooltipWrapper = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
526+
tooltipWrapper =
527+
overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
525528
expect(tooltipWrapper.getAttribute('dir')).toBe('ltr', 'Expected tooltip to be in LTR.');
526529
}));
527530

0 commit comments

Comments
 (0)