Skip to content

Page loses scrollbar when using Algolia search bar #10162

@therama

Description

@therama

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

When using the search bar provided by Algolia DocSearch, and when entering a state where the modal search popup window closes but the focus remains highlighted on the search bar in the top navigation bar, if then a character input is made, then the page loses it's scrollbar.
The issue seems to be that although the modal search popup window appears closed, it is still lingering and accepting input. Upon input it regains the focus (or possibly a state change triggers) and thus the scrollbar from the main page disappears.

The issue is reproducible on: https://docusaurus.io/docs/

Reproducible demo

No response

Steps to reproduce

  1. Go to https://docusaurus.io/docs/
  2. Click on the top-right search bar
  3. Type in a search query, and click on a result with a fragment identifier (aka #). At the time of writing you can query the term "test" and the first result "# Testing your Build Locally" should be a good candidate. This will navigate to the correct page and jump to the element specified by the # fragment identifier.
  4. Press any character input key.
  5. Try to scroll, it will not function.

Alternatively, for step 3 you could also press the Esc key instead of making a search.

Note: At https://docsearch.algolia.com/ this is not reproducible.

Expected behavior

Scrolling should work normally.

Actual behavior

Scrolling is blocked.

At a high level it seems that this is a symptom of the modal search popup window not being properly dismissed.

Your environment

  • Public source code: N/A
  • Public site URL: https://docusaurus.io/docs/
  • Docusaurus version used: 3.3.2
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 124
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 14.1.2

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions