fix: scroll list widget to top on page change (#41287)

[Rajadi16]

Description

Fixes List widget UX issue where content stayed scrolled down when changing pages. Now scrolls to top on page change for better user experience.

Fixes: #41287

Tested locally:

1. yarn dev
2. Add List widget (20+ items)
3. Click "Next" page → scrolls to top ✅

Files changed: app/client/src/widgets/ListWidget/index.tsx (3 lines)

First-time contributor! 🚀

Automation

/ok-to-test

Communication

Should the DevRel and Marketing teams inform users about this change?

• No

Summary by CodeRabbit

• New Features
  • Lists now automatically scroll to the top when navigating between pages for improved browsing experience.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added a public scrollToTop() method to the ListWidget class that resets the scroll position of the widget's scroll container to the top. The method is automatically invoked with a setTimeout delay after page changes in both the onPageChange and ListPagination onChange handlers to ensure users start at the top of the next page.

Changes

Cohort / File(s)	Change Summary
ListWidget scroll-to-top enhancement app/client/src/widgets/ListWidget/widget/index.tsx	Added public scrollToTop() method to locate and reset scroll container. Integrated scroll-to-top behavior into page change handlers (onPageChange and ListPagination onChange) via setTimeout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the setTimeout delay is sufficient for DOM updates to complete
• Confirm the scroll container is correctly identified via widgetId lookup
• Validate that the integration handles all pagination scenarios (direct page change, next/previous buttons)

Poem

📜 A scroll that dances to the top,
No more endless scrolling, no stop,
Next page gleams fresh and bright,
Users smile with UX delight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: scrolling the list widget to the top when pages change, directly addressing the issue.
Description check	✅ Passed	The description is well-structured, includes issue reference, testing steps, and files changed. It follows most template sections and provides sufficient context for reviewers.
Linked Issues check	✅ Passed	The changes directly address issue #41287 by implementing automatic scrolling to the top on page navigation, meeting the core requirement to improve list pagination UX.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the pagination scroll behavior in ListWidget, with no extraneous modifications or out-of-scope alterations detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/client/src/widgets/ListWidget/widget/index.tsx (1)

851-860: scrollToTop helper and usage meet the UX goal; DOM targeting could be tightened (optional)

This implementation cleanly resets scroll after both server-side page changes (onPageChange) and client-side ones, and the setTimeout(..., 0) is a reasonable way to ensure the DOM is updated before scrolling.

If you touch this again, one optional refinement would be to avoid a global document.querySelector on .${widgetId} and instead either:

• attach a ref to the actual scroll container, or
• at least narrow the selector to that specific scrollable element,

so the behavior is less coupled to class naming conventions and less prone to future markup changes. Functionally, though, this is fine for the current fix.

Also applies to: 875-877

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a66855 and 949da39.

📒 Files selected for processing (1)

• app/client/src/widgets/ListWidget/widget/index.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-05-12T07:40:10.816Z

Learnt from: rahulbarwal
Repo: appsmithorg/appsmith PR: 40632
File: app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx:84-87
Timestamp: 2025-05-12T07:40:10.816Z
Learning: In React Window, visibleStopIndex (often renamed as lastRenderedRowInTheCurrentView in TableWidgetV2) updates as soon as items become partially visible in the viewport. Adding +1 to this index before calculating the current page would incorrectly consider rows not present in the current viewport, potentially causing issues with pagination and infinite scroll logic.

Applied to files:

• app/client/src/widgets/ListWidget/widget/index.tsx

🔇 Additional comments (1)

app/client/src/widgets/ListWidget/widget/index.tsx (1)

1544-1547: Client-side pagination scroll reset looks good

Updating state.page and then calling scrollToTop here ensures client-side pagination now mirrors the fixed behavior for server-side pagination, with minimal and clear code. No issues from my side.