Incorrect panel top position with getBoundingClientRect

[deresatom]

Description

The #536 PR attempted to fix a display issue, but this seems to be not working in every case. Sometimes it positions correctly, most of the time it doesn't.

Result panel displayed is displaying in random positions if the page is scrollable.

Reproduction

Steps

1. Go to codesandbox
2. Select index.html
3. Set an arbitrary height +/ margin on the container so we can scroll down

 <div class="container" style="min-height: 1000px;margin-top:200px;">
      <div id="autocomplete"></div>
</div>

3. Scroll a little bit
4. Click the autocomplete input, the results panel will be displayed in random positions

autocomplete_1.0.1_getBoundingClientRect.mp4

Expected behavior

The results panel should appear below the autocomplete input field.

Environment

• OS: Windows 10
• Browser: Chrome 90.0.4430.212
• Autocomplete version: 1.0.1

[francoischalifour]

Thanks for the report!

We're currently working on a fix for this—it'll be shipped during the week.

[deresatom]

Hey,

Thanks for the super quick fix!

document.body.scrollTop seems to be working inconsistently (sometimes it just calculates 0, sometimes returns the correct position) in Chrome for me.

There is a stackoverflow post regarding scrollTop being deprecated

I adjusted the code and by using this one is working perfectly on my end!

Solution:

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 
var top = scrollTop + containerRect.top + containerRect.height;

Thanks guys!
Keep up the great work

[francoischalifour]

Thanks again @deresatom. I addressed this in #595.