Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 22, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/cdk-experimental/dialog/dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,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');
});
Expand Down
10 changes: 8 additions & 2 deletions src/cdk/overlay/overlay-directives.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/cdk/overlay/overlay-ref.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down
4 changes: 2 additions & 2 deletions src/cdk/overlay/overlay.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand Down
2 changes: 0 additions & 2 deletions src/cdk/overlay/position/flexible-connected-position-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down
15 changes: 9 additions & 6 deletions src/lib/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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();
Expand All @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/bottom-sheet/bottom-sheet.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
8 changes: 4 additions & 4 deletions src/lib/datepicker/datepicker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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');

Expand All @@ -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');
}));
Expand All @@ -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');
});
Expand Down
2 changes: 1 addition & 1 deletion src/lib/dialog/dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
15 changes: 9 additions & 6 deletions src/lib/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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();
Expand All @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/snack-bar/snack-bar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ describe('MatSnackBar', () => {
snackBar.open(simpleMessage, simpleActionLabel, { direction: 'rtl' });
viewContainerFixture.detectChanges();

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

expect(pane.getAttribute('dir')).toBe('rtl', 'Expected the pane to be in RTL mode.');
});
Expand Down
9 changes: 6 additions & 3 deletions src/lib/tooltip/tooltip.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,7 +497,8 @@ describe('MatTooltip', () => {
tick(0);
fixture.detectChanges();

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

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

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

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

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

Expand Down