Skip to content

Comments

fix: no more scrolling to top when opening AI menu#2503

Merged
nperez0111 merged 4 commits intomainfrom
fix/ai-scroll-top
Feb 23, 2026
Merged

fix: no more scrolling to top when opening AI menu#2503
nperez0111 merged 4 commits intomainfrom
fix/ai-scroll-top

Conversation

@YousefED
Copy link
Collaborator

@YousefED YousefED commented Feb 20, 2026

closes #2446

Summary

Fix page scrolling to the top when opening the AI menu.

Rationale

When opening the AI menu, the page's vertical scroll position would jump to the top. This happened because focusing the input element inside the floating popover triggers the browser's native scroll-into-view behavior before the element is properly positioned. By wrapping the popover content in floating-ui's FloatingFocusManager (via focusManagerProps: {}), focus is managed without causing the scroll jump (floating-ui docs).

Changes

  • Added focusManagerProps option to FloatingUIOptions and GenericPopover to optionally wrap popover content in a FloatingFocusManager
  • Set focusManagerProps: {} in AIMenuController to use managed focus instead of native autoFocus
  • Added Playwright e2e test to catch regressions

Impact

No breaking changes. Only affects the AI menu's focus behavior when opening.

Testing

  • Playwright test scrolls to the bottom of the page, opens the AI menu, and verifies:
    • scrollY hasn't jumped to 0
    • The AI menu input is focused
    • Screenshot snapshot matches

Screenshots/Video

x

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the new feature have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature

Additional Notes

N/A

@vercel
Copy link

vercel bot commented Feb 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview Feb 23, 2026 7:22am
blocknote-website Ready Ready Preview Feb 23, 2026 7:22am

Request Review

@YousefED YousefED requested a review from nperez0111 February 20, 2026 11:32
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 20, 2026

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2503

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2503

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2503

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2503

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2503

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2503

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2503

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2503

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2503

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2503

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2503

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2503

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2503

commit: 57d785c

}),
// we use the focus manager instead of `autoFocus={true}` to prevent "page-scrolls-to-top-when-opening-the-floating-element"
// see https://floating-ui.com/docs/floatingfocusmanager#page-scrolls-to-top-when-opening-the-floating-element
focusManagerProps: {},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is sort of a smell no? This is equivalent to enabling it, but it doesn't feel right.

Shouldn't we always render the focus manager and just toggle the disabled prop?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, I improved this in latest commit:

  • was a bit cumbersome as now I make sure it's disabled by default on all call sites
  • good news is that I was able to fix a bug so that FloatingComposer (for comments) now also autofocuses correctly
  • side note; do you know if TableCellPopover can be removed? it's not used anywhere afaik

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first I was confused why you needed this, but then it made sense that you needed to pass through these props. I think this is fine for now, and is explicit.

We don't need TableCellPopover, I think it stayed from the refactor. I removed it

@nperez0111 nperez0111 merged commit 54556ca into main Feb 23, 2026
8 checks passed
@nperez0111 nperez0111 deleted the fix/ai-scroll-top branch February 23, 2026 07:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug AI Menu scroll up

2 participants