[Autocomplete-js npm] result panel leaving space and go down on each page scroll

[dev-ronak-patel]

Description

[Autocomplete-js npm] result panel leaving space and go down on each page scroll

Reproduction

go to chrome browser demo where page height is more than screen size and autocomplete input is at top and then scroll one or two time and then click and search. the result will show at little down of autocomplete input

Expected behavior

it should open just attached to autocomplete input

Environment

• OS: Linux / macOS
• Browser: Chrome
• Autocomplete version: [e.g. 1.5.3]

[Haroenv]

Is this what you mean? You can change that by overriding the default .aa-Panel { margin: 8px 0 0 }. To have a "glued" autocomplete you can do:

.aa-Panel {
  margin: 0 !important;
}

You'll likely want to change the border-radius of the open panel too then

[dev-ronak-patel]

No, not this sorry. it is leaving more and more space on each page scroll event. so for reproduce it you will need long page where window scroll is exist and then you can do one scroll and see panel position and then do one more scroll down and see panel position. Hope it make sense.

[Haroenv]

I can't reproduce it yet here, could you clarify? https://codesandbox.io/s/determined-dijkstra-ulp2g1?file=/index.html

[dev-ronak-patel]

so here is the demo https://yu6nvd.csb.app/
not sure if i am doing something wrong
thanks

[dev-ronak-patel]

[Haroenv]

Looks like this part of the code is responsible of setting a top value on the panel, which indeed should be tracking the input, not the whole page's scroll

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

Line 25 in cce4b5f

const top = scrollTop + containerRect.top + containerRect.height;

[dev-ronak-patel]

Yeah, Any quick fix / solution will be helpful. Thanks for investigating !

[dev-ronak-patel]

So for information, it is properly working with version "1.0.0-alpha.49"

[Haroenv]

A workaround is to set the top position manually: https://codesandbox.io/s/sweet-tesla-v8m0y9?file=/src/autocomplete.tsx

[dev-ronak-patel]

Yeah, can you share more info or code snippet sorry!
Thanks again !

[Haroenv]

@ronty123, the code snippet is in the link I shared: https://codesandbox.io/s/sweet-tesla-v8m0y9?file=/src/autocomplete.tsx:6772-7079

  render({ children }, root) {
    // hardcoded fix for https://github.com/algolia/autocomplete/issues/904
    const container = document.querySelector("#autocomplete");
    const rect = container.getBoundingClientRect();
    root.style.top = rect.top + rect.height + "px";

    render(children, root);
  },

[dev-ronak-patel]

Thanks mate, cheers!

[Giozar]

Have you been able to solve the problem? I have the exact same problem

[dev-ronak-patel]

Yes, it was fixed for me with above solution