fix: panel position in positioned container (#763)

[salomvary]

Closes #763

Summary

Fix computing panel position and width when autocomplete is placed inside a positioned element.

Result

I've added an example to demonstrate the fix. It is in a separate commit so that it can easily be removed if this does not deserve a dedicated example.

yarn workspace @algolia/autocomplete-example-panel-placement-positioned start

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 09abe19:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration
@algolia/autocomplete-example-panel-placement	Issue #763

[Haroenv]

thanks!

[alcohol]

This release broke our layout..

We went from 1.19.6 rendering as

to 1.19.7 rendering as

Having trouble figuring out how to fix this though.

[Haroenv]

Can you share your code in a reproducible example so we can see what side effect caused this? I'm having a hard time trying to reproduce your situation @alcohol

[alcohol]

That's going to be difficult. You can find the search on https://polyestershoppen.nl (or .com for english).

But to extract this into a reproducible template.. oef.. this website is a nightmare html/css wise. Over a decade of spaghetti patching 😢

[bryantee]

@alcohol this broke our layout in the exact same way. The fix that I was able to implement was to use the same ref for the autocomplete container and panelContainer, which effectively made them siblings.

[Haroenv]

I've tried to reproduce and find a solution that still fixes @salomvary's original issue, but wasn't able to. If someone would like to find a solution that would work for all these use cases, I'll merge it right away :)

[alcohol]

@bryantee cheers for that! That solves our issue as well.