Skip to content

fix(js): compute panel top position with getBoundingClientRect #536

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 2 commits into from
Apr 22, 2021
Merged

fix(js): compute panel top position with getBoundingClientRect #536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
855c063
fix: correct panel postion
Apr 17, 2021
1e4e436
test(js): add tests for panel top position
francoischalifour Apr 22, 2021
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
37 changes: 15 additions & 22 deletions packages/autocomplete-js/src/__tests__/panelPlacement.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { waitFor } from '@testing-library/dom';

import { autocomplete } from '../autocomplete';

// Arbitrary values to mock `getBoundingClientRect`, `offsetTop` and `clientWidth`
// Arbitrary values to mock `getBoundingClientRect` and `clientWidth`
// (by default jest mock everything to 0 but we cannot properly check the calculations if everything is set to 0)
const OFFSET_TOP = 2;
const CLIENT_WIDTH = 3;
const BOTTOM = 5;
const HEIGHT = 7;
const LEFT = 11;
Expand All @@ -28,16 +26,16 @@ describe('panelPlacement', () => {
});

beforeAll(() => {
Object.defineProperty(window.HTMLElement.prototype, 'offsetTop', {
get() {
return OFFSET_TOP;
},
});
Object.defineProperty(document.documentElement, 'clientWidth', {
get() {
return CLIENT_WIDTH;
return 1920;
},
});
Object.defineProperty(document.documentElement, 'clientHeight', {
writable: true,
configurable: true,
value: 1080,
});
});

beforeEach(() => {
Expand All @@ -50,11 +48,6 @@ describe('panelPlacement', () => {
});

afterAll(() => {
Object.defineProperty(window.HTMLElement.prototype, 'offsetTop', {
get() {
return 0;
},
});
Object.defineProperty(document.documentElement, 'clientWidth', {
get() {
return 0;
Expand Down Expand Up @@ -82,9 +75,9 @@ describe('panelPlacement', () => {

await waitFor(() => {
expect(document.querySelector('.aa-Panel')).toHaveStyle({
top: '9px', // OFFSET_TOP + HEIGHT
top: '24px', // TOP + HEIGHT
left: '11px', // LEFT
right: '-27px', // CLIENT_WIDTH - (LEFT + WIDTH)
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
width: 'unset',
'max-width': 'unset',
});
Expand Down Expand Up @@ -112,7 +105,7 @@ describe('panelPlacement', () => {

await waitFor(() => {
expect(document.querySelector('.aa-Panel')).toHaveStyle({
top: '9px', // OFFSET_TOP + HEIGHT
top: '24px', // TOP + HEIGHT
left: '11px', // LEFT
});
});
Expand All @@ -139,8 +132,8 @@ describe('panelPlacement', () => {

await waitFor(() => {
expect(document.querySelector('.aa-Panel')).toHaveStyle({
top: '9px', // OFFSET_TOP + HEIGHT
right: '-27px', // CLIENT_WIDTH - (LEFT + WIDTH)
top: '24px', // TOP + HEIGHT
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
});
});
});
Expand All @@ -166,7 +159,7 @@ describe('panelPlacement', () => {

await waitFor(() => {
expect(document.querySelector('.aa-Panel')).toHaveStyle({
top: '9px', // OFFSET_TOP + HEIGHT
top: '24px', // TOP + HEIGHT
left: 0,
right: 0,
width: 'unset',
Expand Down Expand Up @@ -194,9 +187,9 @@ describe('panelPlacement', () => {

await waitFor(() => {
expect(document.querySelector('.aa-Panel')).toHaveStyle({
top: '9px', // OFFSET_TOP + HEIGHT
top: '24px', // TOP + HEIGHT
left: '11px', // LEFT
right: '-27px', // CLIENT_WIDTH - (LEFT + WIDTH)
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
width: 'unset',
'max-width': 'unset',
});
Expand Down
35 changes: 18 additions & 17 deletions packages/autocomplete-js/src/__tests__/positioning.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,19 @@ describe('Panel positioning', () => {
});
});

afterAll(() => {
Object.defineProperty(document.documentElement, 'clientWidth', {
get() {
return 0;
},
});
Object.defineProperty(document.documentElement, 'clientHeight', {
get() {
return 0;
},
});
});

afterEach(() => {
document.body.innerHTML = '';
});
Expand All @@ -101,11 +114,6 @@ describe('Panel positioning', () => {
});

const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
Object.defineProperty(root, 'offsetTop', {
writable: true,
configurable: true,
value: 40,
});
root.getBoundingClientRect = jest.fn().mockReturnValue(rootPosition);
const form = document.querySelector<HTMLFormElement>('.aa-Form');
form.getBoundingClientRect = jest.fn().mockReturnValue(formPosition);
Expand All @@ -116,7 +124,7 @@ describe('Panel positioning', () => {
await waitFor(() => getByTestId(panelContainer, 'panel'));

expect(getByTestId(panelContainer, 'panel')).toHaveStyle({
top: '60px',
top: '40px',
left: '300px',
right: '1020px',
});
Expand All @@ -136,11 +144,6 @@ describe('Panel positioning', () => {

const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
root.getBoundingClientRect = jest.fn().mockReturnValue(rootPosition);
Object.defineProperty(root, 'offsetTop', {
writable: true,
configurable: true,
value: 40,
});
const form = document.querySelector<HTMLFormElement>('.aa-Form');
form.getBoundingClientRect = jest.fn().mockReturnValue(formPosition);

Expand All @@ -150,19 +153,17 @@ describe('Panel positioning', () => {
await waitFor(() => getByTestId(panelContainer, 'panel'));

expect(getByTestId(panelContainer, 'panel')).toHaveStyle({
top: '60px',
top: '40px',
left: '300px',
right: '1020px',
});

input.blur();

// Move the root vertically
Object.defineProperty(root, 'offsetTop', {
writable: true,
configurable: true,
value: 90,
});
root.getBoundingClientRect = jest
.fn()
.mockReturnValue({ ...rootPosition, top: 90 });

input.focus();

Expand Down
2 changes: 1 addition & 1 deletion packages/autocomplete-js/src/getPanelPlacementStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function getPanelPlacementStyle({
environment,
}: GetPanelPlacementStyleParams) {
const containerRect = container.getBoundingClientRect();
const top = container.offsetTop + containerRect.height;
const top = containerRect.top + containerRect.height;

switch (panelPlacement) {
case 'start': {
Expand Down