Skip to content

Commit 22d6019

Browse files
HaroenvHaroenv
authored
fix(styling): revert 1.19.7 (#1344)
The PRs #1338 and #1336 were very promising, but caused some regressions in positioned containers. Therefore for now i'll revert them. @salomvary, if you could reimplement these changes, but taking the relative positioning in account, that would be ideal. fixes #1342
1 parent 2550860 commit 22d6019

File tree

3 files changed

+86
-100
lines changed

3 files changed

+86
-100
lines changed

‎packages/autocomplete-js/src/__tests__/panelPlacement.test.ts‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -26,42 +26,6 @@ describe('panelPlacement', () => {
2626
toJSON: () => {},
2727
});
2828

29-
function mockPosition() {
30-
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
31-
document.querySelector('.aa-Form').getBoundingClientRect =
32-
mockedGetBoundingClientRect;
33-
Object.defineProperty(document.querySelector('.aa-Form'), 'offsetLeft', {
34-
get() {
35-
return LEFT;
36-
},
37-
});
38-
Object.defineProperty(document.querySelector('.aa-Form'), 'offsetTop', {
39-
get() {
40-
return TOP;
41-
},
42-
});
43-
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
44-
mockedGetBoundingClientRect;
45-
Object.defineProperty(
46-
document.querySelector('.aa-Autocomplete'),
47-
'offsetLeft',
48-
{
49-
get() {
50-
return LEFT;
51-
},
52-
}
53-
);
54-
Object.defineProperty(
55-
document.querySelector('.aa-Autocomplete'),
56-
'offsetTop',
57-
{
58-
get() {
59-
return TOP;
60-
},
61-
}
62-
);
63-
}
64-
6529
beforeAll(() => {
6630
Object.defineProperty(document.documentElement, 'clientWidth', {
6731
get() {
@@ -103,7 +67,11 @@ describe('panelPlacement', () => {
10367
},
10468
});
10569

106-
mockPosition();
70+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
71+
document.querySelector('.aa-Form').getBoundingClientRect =
72+
mockedGetBoundingClientRect;
73+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
74+
mockedGetBoundingClientRect;
10775

10876
await waitFor(() => {
10977
expect(document.querySelector('.aa-Panel')).toHaveStyle({
@@ -127,11 +95,15 @@ describe('panelPlacement', () => {
12795

12896
fireEvent.scroll(document.body, { target: { scrollTop: SCROLL } });
12997

130-
mockPosition();
98+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
99+
document.querySelector('.aa-Form').getBoundingClientRect =
100+
mockedGetBoundingClientRect;
101+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
102+
mockedGetBoundingClientRect;
131103

132104
await waitFor(() => {
133105
expect(document.querySelector('.aa-Panel')).toHaveStyle({
134-
top: '24px', // TOP + HEIGHT
106+
top: '124px', // TOP + HEIGHT + SCROLL
135107
left: '11px', // LEFT
136108
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
137109
width: 'unset',
@@ -151,7 +123,11 @@ describe('panelPlacement', () => {
151123
},
152124
});
153125

154-
mockPosition();
126+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
127+
document.querySelector('.aa-Form').getBoundingClientRect =
128+
mockedGetBoundingClientRect;
129+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
130+
mockedGetBoundingClientRect;
155131

156132
await waitFor(() => {
157133
expect(document.querySelector('.aa-Panel')).toHaveStyle({
@@ -172,11 +148,15 @@ describe('panelPlacement', () => {
172148

173149
fireEvent.scroll(document.body, { target: { scrollTop: SCROLL } });
174150

175-
mockPosition();
151+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
152+
document.querySelector('.aa-Form').getBoundingClientRect =
153+
mockedGetBoundingClientRect;
154+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
155+
mockedGetBoundingClientRect;
176156

177157
await waitFor(() => {
178158
expect(document.querySelector('.aa-Panel')).toHaveStyle({
179-
top: '24px', // TOP + HEIGHT
159+
top: '124px', // TOP + HEIGHT + SCROLL
180160
left: '11px', // LEFT
181161
});
182162
});
@@ -193,7 +173,11 @@ describe('panelPlacement', () => {
193173
},
194174
});
195175

196-
mockPosition();
176+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
177+
document.querySelector('.aa-Form').getBoundingClientRect =
178+
mockedGetBoundingClientRect;
179+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
180+
mockedGetBoundingClientRect;
197181

198182
await waitFor(() => {
199183
expect(document.querySelector('.aa-Panel')).toHaveStyle({
@@ -214,11 +198,15 @@ describe('panelPlacement', () => {
214198

215199
fireEvent.scroll(document.body, { target: { scrollTop: SCROLL } });
216200

217-
mockPosition();
201+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
202+
document.querySelector('.aa-Form').getBoundingClientRect =
203+
mockedGetBoundingClientRect;
204+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
205+
mockedGetBoundingClientRect;
218206

219207
await waitFor(() => {
220208
expect(document.querySelector('.aa-Panel')).toHaveStyle({
221-
top: '24px', // TOP + HEIGHT
209+
top: '124px', // TOP + HEIGHT + SCROLL
222210
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
223211
});
224212
});
@@ -235,7 +223,11 @@ describe('panelPlacement', () => {
235223
},
236224
});
237225

238-
mockPosition();
226+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
227+
document.querySelector('.aa-Form').getBoundingClientRect =
228+
mockedGetBoundingClientRect;
229+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
230+
mockedGetBoundingClientRect;
239231

240232
await waitFor(() => {
241233
expect(document.querySelector('.aa-Panel')).toHaveStyle({
@@ -259,11 +251,15 @@ describe('panelPlacement', () => {
259251

260252
fireEvent.scroll(document.body, { target: { scrollTop: SCROLL } });
261253

262-
mockPosition();
254+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
255+
document.querySelector('.aa-Form').getBoundingClientRect =
256+
mockedGetBoundingClientRect;
257+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
258+
mockedGetBoundingClientRect;
263259

264260
await waitFor(() => {
265261
expect(document.querySelector('.aa-Panel')).toHaveStyle({
266-
top: '24px', // TOP + HEIGHT
262+
top: '124px', // TOP + HEIGHT + SCROLL
267263
left: 0,
268264
right: 0,
269265
width: 'unset',
@@ -281,7 +277,11 @@ describe('panelPlacement', () => {
281277
},
282278
});
283279

284-
mockPosition();
280+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
281+
document.querySelector('.aa-Form').getBoundingClientRect =
282+
mockedGetBoundingClientRect;
283+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
284+
mockedGetBoundingClientRect;
285285

286286
await waitFor(() => {
287287
expect(document.querySelector('.aa-Panel')).toHaveStyle({
@@ -332,11 +332,15 @@ describe('panelPlacement', () => {
332332

333333
fireEvent.scroll(document.body, { target: { scrollTop: SCROLL } });
334334

335-
mockPosition();
335+
// Mock `getBoundingClientRect` for elements used in the panel placement calculation
336+
document.querySelector('.aa-Form').getBoundingClientRect =
337+
mockedGetBoundingClientRect;
338+
document.querySelector('.aa-Autocomplete').getBoundingClientRect =
339+
mockedGetBoundingClientRect;
336340

337341
await waitFor(() => {
338342
expect(document.querySelector('.aa-Panel')).toHaveStyle({
339-
top: '24px', // TOP + HEIGHT
343+
top: '124px', // TOP + HEIGHT + SCROLL
340344
left: '11px', // LEFT
341345
right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
342346
width: 'unset',

‎packages/autocomplete-js/src/__tests__/positioning.test.ts‎

Lines changed: 16 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -101,41 +101,6 @@ describe('Panel positioning', () => {
101101
document.body.innerHTML = '';
102102
});
103103

104-
function mockPosition(
105-
_rootPosition = rootPosition,
106-
_formPosition = formPosition
107-
) {
108-
const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
109-
root.getBoundingClientRect = jest.fn().mockReturnValue(_rootPosition);
110-
Object.defineProperty(root, 'offsetLeft', {
111-
get() {
112-
return _rootPosition.left;
113-
},
114-
configurable: true,
115-
});
116-
Object.defineProperty(root, 'offsetTop', {
117-
get() {
118-
return _rootPosition.top;
119-
},
120-
configurable: true,
121-
});
122-
123-
const form = document.querySelector<HTMLFormElement>('.aa-Form');
124-
form.getBoundingClientRect = jest.fn().mockReturnValue(_formPosition);
125-
Object.defineProperty(form, 'offsetLeft', {
126-
get() {
127-
return _formPosition.left;
128-
},
129-
configurable: true,
130-
});
131-
Object.defineProperty(form, 'offsetTop', {
132-
get() {
133-
return _formPosition.top;
134-
},
135-
configurable: true,
136-
});
137-
}
138-
139104
test('positions the panel below the root element', async () => {
140105
const container = document.createElement('div');
141106
const panelContainer = document.body;
@@ -148,7 +113,10 @@ describe('Panel positioning', () => {
148113
plugins: [querySuggestionsFixturePlugin],
149114
});
150115

151-
mockPosition();
116+
const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
117+
root.getBoundingClientRect = jest.fn().mockReturnValue(rootPosition);
118+
const form = document.querySelector<HTMLFormElement>('.aa-Form');
119+
form.getBoundingClientRect = jest.fn().mockReturnValue(formPosition);
152120

153121
const input = document.querySelector<HTMLInputElement>('.aa-Input');
154122
userEvent.type(input, 'a');
@@ -174,7 +142,10 @@ describe('Panel positioning', () => {
174142
plugins: [querySuggestionsFixturePlugin],
175143
});
176144

177-
mockPosition();
145+
const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
146+
root.getBoundingClientRect = jest.fn().mockReturnValue(rootPosition);
147+
const form = document.querySelector<HTMLFormElement>('.aa-Form');
148+
form.getBoundingClientRect = jest.fn().mockReturnValue(formPosition);
178149

179150
const input = document.querySelector<HTMLInputElement>('.aa-Input');
180151
userEvent.type(input, 'a');
@@ -184,7 +155,7 @@ describe('Panel positioning', () => {
184155
await waitFor(() => getByTestId(panelContainer, 'panel'));
185156

186157
expect(getByTestId(panelContainer, 'panel')).toHaveStyle({
187-
top: '40px',
158+
top: '140px',
188159
left: '300px',
189160
right: '1020px',
190161
});
@@ -204,7 +175,10 @@ describe('Panel positioning', () => {
204175
plugins: [querySuggestionsFixturePlugin],
205176
});
206177

207-
mockPosition();
178+
const root = document.querySelector<HTMLDivElement>('.aa-Autocomplete');
179+
root.getBoundingClientRect = jest.fn().mockReturnValue(rootPosition);
180+
const form = document.querySelector<HTMLFormElement>('.aa-Form');
181+
form.getBoundingClientRect = jest.fn().mockReturnValue(formPosition);
208182

209183
const input = document.querySelector<HTMLInputElement>('.aa-Input');
210184
userEvent.type(input, 'a');
@@ -220,7 +194,9 @@ describe('Panel positioning', () => {
220194
userEvent.click(document.body);
221195

222196
// Move the root vertically
223-
mockPosition({ ...rootPosition, top: 90 });
197+
root.getBoundingClientRect = jest
198+
.fn()
199+
.mockReturnValue({ ...rootPosition, top: 90 });
224200

225201
input.focus();
226202

‎packages/autocomplete-js/src/getPanelPlacementStyle.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,29 @@ export function getPanelPlacementStyle({
1515
environment,
1616
}: GetPanelPlacementStyleParams) {
1717
const containerRect = container.getBoundingClientRect();
18-
const offsetParent =
19-
container.offsetParent || environment.document.documentElement;
20-
21-
const top = container.offsetTop + containerRect.height;
18+
// Some browsers have specificities to retrieve the document scroll position.
19+
// See https://stackoverflow.com/a/28633515/9940315
20+
const scrollTop =
21+
(environment.pageYOffset as number) ||
22+
environment.document.documentElement.scrollTop ||
23+
environment.document.body.scrollTop ||
24+
0;
25+
const top = scrollTop + containerRect.top + containerRect.height;
2226

2327
switch (panelPlacement) {
2428
case 'start': {
2529
return {
2630
top,
27-
left: container.offsetLeft,
31+
left: containerRect.left,
2832
};
2933
}
3034

3135
case 'end': {
3236
return {
3337
top,
3438
right:
35-
offsetParent.clientWidth -
36-
(container.offsetLeft + containerRect.width),
39+
environment.document.documentElement.clientWidth -
40+
(containerRect.left + containerRect.width),
3741
};
3842
}
3943

@@ -52,8 +56,10 @@ export function getPanelPlacementStyle({
5256

5357
return {
5458
top,
55-
left: form.offsetLeft,
56-
right: offsetParent.clientWidth - (form.offsetLeft + formRect.width),
59+
left: formRect.left,
60+
right:
61+
environment.document.documentElement.clientWidth -
62+
(formRect.left + formRect.width),
5763
width: 'unset',
5864
maxWidth: 'unset',
5965
};

0 commit comments

Comments
 (0)