NotificationsYou must be signed in to change notification settings
Fork4.4k
Star38.5k

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Open

Rajadi16 wants to merge1 commit intoappsmithorg:release

base:release

Choose a base branch

fromRajadi16:release

Open

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

Rajadi16 wants to merge1 commit intoappsmithorg:releasefromRajadi16:release

Conversation

Copy link

Rajadi16 commentedNov 28, 2025•
edited by coderabbitaibot
Loading

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:

yarn dev
Add List widget (20+ items)
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?

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

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

949da39

Rajadi16 requested a review froma team as acode owner

November 28, 2025 21:19

Rajadi16 requested review fromrahulbarwal and removed request fora team

November 28, 2025 21:19

Copy link

Contributor

coderabbitaibot commentedNov 28, 2025•
edited
Loading

Walkthrough

Added a publicscrollToTop() 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 theonPageChange 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 thehigh-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using thehigh_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Usehigh_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:
📝 Description — Summarize the main change in 50–60 words, explaining what was done.
📓 References — List relevant issues, discussions, documentation, or related PRs.
📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |
✔️ 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 usingCodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitaibot reviewed

Nov 28, 2025

View reviewed changes

Copy link

Contributor

coderabbitaibot left a comment

Choose a reason for hiding this comment

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

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 thesetTimeout(..., 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 globaldocument.querySelector on.${widgetId} and instead either:
attach aref 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 between2a66855 and949da39.

📒 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: rahulbarwalRepo: appsmithorg/appsmith PR: 40632File: app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx:84-87Timestamp: 2025-05-12T07:40:10.816ZLearning: 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
Updatingstate.page and then callingscrollToTop here ensures client-side pagination now mirrors the fixed behavior for server-side pagination, with minimal and clear code. No issues from my side.

Labels

None yet

Movatterモバイル変換

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

Rajadi16 commentedNov 28, 2025•
edited by coderabbitaibot
Loading

Uh oh!

Description

Automation

Communication

Summary by CodeRabbit

Uh oh!

coderabbitaibot commentedNov 28, 2025•
edited
Loading

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches