algolia / docsearch

:blue_book: The easiest way to add search to your documentation.
https://docsearch.algolia.com
MIT License
3.97k stars 384 forks source link

Result dropdown is static and does not move realtive to viewport #580

Open varundey opened 5 years ago

varundey commented 5 years ago

Do you want to request a feature or report a bug? Bug

If the current behavior is a bug, please provide all the steps to reproduce.

What is the expected behavior? The search dropdown should scroll.

What is the current behavior? The dropdown container is fixed and is not scrollable. Instead the website in the background starts to scroll.

I saw this bug first on https://eslint.org/. I realised that when I search for something with multiple results (try something very generic like "variable"), it flows out of the viewport and the container itself is not scrollable. I figured it is an issue with eslint but upon digging a bit, I realised that the bug is coming from DocSearch. Since I could not query on DocSearch which will overflow my browser viewport, I tried resizing the height of browser and voila, bug reproduced! I tested the same behaviour across multiple websites that use DocSearch (react, bootstrap etc) and I could verify the reproducibility of this bug.

screen shot 2019-01-04 at 1 03 20 pm
varundey commented 5 years ago

Really quick debugging + inspect element and I could come up with putting a scroll next to dropdown which will depend on viewport height

When viewport is small compared to search result div

screen shot 2019-01-04 at 3 21 08 pm

Otherwise fall back to default

screen shot 2019-01-04 at 3 21 25 pm
s-pace commented 5 years ago

Hi @varundey,

Thank you for sharing. We do think that most users are not updating the size of the windows while using the website this is why we will treat this bug as a minor one.

We will keep this good feedback once we will release a new version of our website. Thank you for your troubleshoot.

s-pace commented 5 years ago

Might be doable thanks to the v3 (beta so far)