fix: panel position in scrolled container #763 (#1338)

salomvary · web-flow · commit 49165667a537 · 2026-03-17T10:01:56.000+01:00
Make sure panel positioning is correct if the panel
is placed in a container that has been scrolled
horizontally or vertically.
diff --git a/examples/panel-placement-positioned/index.html b/examples/panel-placement-positioned/index.html
@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <div class="parent" style="left: 50px; right: 50px; top: 50px; bottom: 50px; padding: 16px; border: 3px solid black; position: absolute">
+    <div class="parent" style="left: 50px; right: 50px; top: 50px; bottom: 50px; padding: 16px; border: 3px solid black; position: fixed; overflow: auto">
       <form>
         Panel placement:
         <input
@@ -33,6 +33,15 @@
         <div id="autocomplete"></div>
         <div id="autocomplete-right"></div>
       </div>
+
+      <div style="width: 150%; height: 150%">
+        <!-- Content that makes the parent scrollable. -->
+      </div>
+    </div>
+
+
+    <div style="height: 3000px; width: 3000px">
+      <!-- Content that makes the body scrollable. -->
     </div>
 
     <script type="module" src="env.ts"></script>
diff --git a/packages/autocomplete-js/src/__tests__/panelPlacement.test.ts b/packages/autocomplete-js/src/__tests__/panelPlacement.test.ts
@@ -131,7 +131,7 @@ describe('panelPlacement', () => {
 
       await waitFor(() => {
         expect(document.querySelector('.aa-Panel')).toHaveStyle({
-          top: '124px', // TOP + HEIGHT + SCROLL
+          top: '24px', // TOP + HEIGHT
           left: '11px', // LEFT
           right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
           width: 'unset',
@@ -176,7 +176,7 @@ describe('panelPlacement', () => {
 
       await waitFor(() => {
         expect(document.querySelector('.aa-Panel')).toHaveStyle({
-          top: '124px', // TOP + HEIGHT + SCROLL
+          top: '24px', // TOP + HEIGHT
           left: '11px', // LEFT
         });
       });
@@ -218,7 +218,7 @@ describe('panelPlacement', () => {
 
       await waitFor(() => {
         expect(document.querySelector('.aa-Panel')).toHaveStyle({
-          top: '124px', // TOP + HEIGHT + SCROLL
+          top: '24px', // TOP + HEIGHT
           right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
         });
       });
@@ -263,7 +263,7 @@ describe('panelPlacement', () => {
 
       await waitFor(() => {
         expect(document.querySelector('.aa-Panel')).toHaveStyle({
-          top: '124px', // TOP + HEIGHT + SCROLL
+          top: '24px', // TOP + HEIGHT
           left: 0,
           right: 0,
           width: 'unset',
@@ -336,7 +336,7 @@ describe('panelPlacement', () => {
 
     await waitFor(() => {
       expect(document.querySelector('.aa-Panel')).toHaveStyle({
-        top: '124px', // TOP + HEIGHT + SCROLL
+        top: '24px', // TOP + HEIGHT
         left: '11px', // LEFT
         right: '1890px', // CLIENT_WIDTH - (LEFT + WIDTH)
         width: 'unset',
diff --git a/packages/autocomplete-js/src/__tests__/positioning.test.ts b/packages/autocomplete-js/src/__tests__/positioning.test.ts
@@ -184,7 +184,7 @@ describe('Panel positioning', () => {
     await waitFor(() => getByTestId(panelContainer, 'panel'));
 
     expect(getByTestId(panelContainer, 'panel')).toHaveStyle({
-      top: '140px',
+      top: '40px',
       left: '300px',
       right: '1020px',
     });
diff --git a/packages/autocomplete-js/src/getPanelPlacementStyle.ts b/packages/autocomplete-js/src/getPanelPlacementStyle.ts
@@ -15,17 +15,10 @@ export function getPanelPlacementStyle({
   environment,
 }: GetPanelPlacementStyleParams) {
   const containerRect = container.getBoundingClientRect();
-  // Some browsers have specificities to retrieve the document scroll position.
-  // See https://stackoverflow.com/a/28633515/9940315
   const offsetParent =
     container.offsetParent || environment.document.documentElement;
 
-  const scrollTop =
-    (environment.pageYOffset as number) ||
-    offsetParent.scrollTop ||
-    environment.document.body.scrollTop ||
-    0;
-  const top = scrollTop + container.offsetTop + containerRect.height;
+  const top = container.offsetTop + containerRect.height;
 
   switch (panelPlacement) {
     case 'start': {
