algolia / algolia/docsearch

Result dropdown is static and does not move realtive to viewport

Open
#580 3 comments 0 reactions 0 assignees View on GitHub
bug DocSearch v3 enhancement minor
Dominant language
TypeScript
Stars
4.4k
Forks
439
Avg merge
14h 32m
Merged PRs (30d)
19

Description

**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.**
* Browse to https://community.algolia.com/docsearch/
* Minimise the height of the browser
* Search for something. Say "test"
* Notice there are multiple search results
* Try to scroll through the search dropdown

**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.

[1]: https://github.com/algolia/docsearch-configs
[2]: https://community.algolia.com/docsearch/config-file.html
[3]: (https://jsfiddle.net/)

screen shot 2019-01-04 at 1 03 20 pm

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue at the DocSearch demo URL by reducing the browser height and searching for a broad term such as "test". Trace the result dropdown behavior from there; done means the dropdown remains within the viewport, scrolls through multiple results, and the page behind it does not scroll.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, search
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.