regression: Center jumped messages in virtualized list by macayu17 · Pull Request #40661 · RocketChat/Rocket.Chat

macayu17 · 2026-05-23T16:45:06Z

Proposed changes (including videos or screenshots)

Jumping to a message now accounts for the leading item rendered before the message rows in the virtualized message list.

That leading item is present when the room foreword or previous-message loader is shown, so using the raw message array index can center the item before the target message. The jump hook now receives the rendered-list offset from MessageList and applies it before calling scrollToIndex.

Issue(s)

Fixes #40619

Steps to test or reproduce

Open a room from a message link that sets the msg query param.
Confirm the highlighted message is centered in the message list.
Run the focused message-list specs.

Further comments

Added unit coverage for the offset case so the virtualizer scrolls to the rendered message item instead of the raw message array index.

Summary by CodeRabbit

Bug Fixes
- Improved message navigation accuracy in room message lists by properly accounting for preview items when jumping to specific messages.
Tests
- Added test coverage for message jump navigation to ensure correct scrolling behavior.

changeset-bot · 2026-05-23T16:45:10Z

⚠️ No Changeset found

Latest commit: 81737be

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dionisio-bot · 2026-05-23T16:45:11Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label
This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

CLAassistant · 2026-05-23T16:45:12Z

All committers have signed the CLA.

coderabbitai · 2026-05-23T16:45:33Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 104543b2-5837-4c1f-9b27-5666937b5b22

📥 Commits

Reviewing files that changed from the base of the PR and between 9379af4 and 81737be.

📒 Files selected for processing (3)

apps/meteor/client/views/room/MessageList/MessageList.tsx
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Agent
GitHub Check: cubic · AI code reviewer

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

apps/meteor/client/views/room/MessageList/MessageList.tsx
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

**/*.spec.ts

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.spec.ts: Use descriptive test names that clearly communicate expected behavior in Playwright tests
Use .spec.ts extension for test files (e.g., login.spec.ts)

Files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts

🧠 Learnings (8)

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

apps/meteor/client/views/room/MessageList/MessageList.tsx

📚 Learning: 2026-05-06T12:21:44.083Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

apps/meteor/client/views/room/MessageList/MessageList.tsx
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📚 Learning: 2026-02-10T16:32:42.586Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📚 Learning: 2026-05-11T20:30:35.265Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 40480
File: apps/meteor/client/meteor/startup/accounts.ts:59-61
Timestamp: 2026-05-11T20:30:35.265Z
Learning: In Rocket.Chat’s Meteor client code, when calling `dispatchToastMessage` with `{ type: 'error' }`, pass the raw caught error object as `message` without manual normalization. `dispatchToastMessage` is designed to accept `message: unknown` for error toasts, so avoid converting errors to strings (e.g., `String(error)`) or extracting `error.message` before passing them.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📚 Learning: 2026-02-24T19:22:48.358Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 38493
File: apps/meteor/tests/e2e/omnichannel/omnichannel-send-pdf-transcript.spec.ts:66-67
Timestamp: 2026-02-24T19:22:48.358Z
Learning: In Playwright end-to-end tests (e.g., under apps/meteor/tests/e2e/...), prefer locating elements by translated text (getByText) and ARIA roles (getByRole) over data-qa attributes. If translation values change, update the corresponding test locators accordingly. Never use data-qa locators. This guideline applies to all Playwright e2e test specs in the repository and helps keep tests robust to UI text changes and accessible semantics.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts
apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts

📚 Learning: 2026-03-06T18:10:15.268Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 39397
File: packages/gazzodown/src/code/CodeBlock.spec.tsx:47-68
Timestamp: 2026-03-06T18:10:15.268Z
Learning: In tests (especially those using testing-library/dom/jsdom) for Rocket.Chat components, the HTML <code> element has an implicit ARIA role of 'code'. Therefore, screen.getByRole('code') or screen.findByRole('code') will locate <code> elements even without a role attribute. Do not flag findByRole('code') as invalid in reviews; prefer using the implicit role instead of adding role="code" unless necessary for accessibility.

Applied to files:

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts

🔇 Additional comments (3)

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts (1)

6-6: LGTM!

Also applies to: 16-19, 22-28, 72-72, 88-88

apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts (1)

1-85: LGTM!

apps/meteor/client/views/room/MessageList/MessageList.tsx (1)

84-84: LGTM!

Walkthrough

The PR extends the message jump-to-scroll hook to account for list offsets when preview items are present, changing the virtualizer type and adding an offset parameter that flows from MessageList through the hook to the scroll calculation.

Changes

Message list offset for centered jump scrolling

Layer / File(s)	Summary
useTryToJumpToMessage hook with offset support `apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts`, `apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts`	The hook's `virtualizerRef` prop type changes from `WindowVirtualizerHandle` to `VirtualizerHandle`. A new optional `messageListItemOffset` prop (default `0`) is added and used when computing the target scroll index. The dependency array includes `messageListItemOffset` to retrigger the effect when offset changes. A test suite validates scroll behavior with the offset applied.
MessageList integration with preview offset `apps/meteor/client/views/room/MessageList/MessageList.tsx`	The hook invocation passes `messageListItemOffset: canPreview ? 1 : 0`, ensuring the jump target accounts for preview items prepended to the list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

type: bug

Suggested reviewers

tassoevan

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main change: fixing a regression where jumped messages weren't centered properly in the virtualized list by accounting for list offset.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#40619` by implementing offset calculation in useTryToJumpToMessage hook to center jumped messages, with corresponding test coverage added.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the jump-to-message centering issue: modified the hook to accept and apply messageListItemOffset, updated MessageList to pass the offset, and added comprehensive test coverage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

ISSUE-40619: Request failed with status code 401

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

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

Copilot

Pull request overview

This PR fixes a regression in the room virtualized message list where deep-link “jump to message” could center the wrong item when the list renders a leading row (room foreword or the “load previous messages” row) ahead of the message rows.

Changes:

Pass a rendered-list leading-item offset from MessageList into the jump-to-message hook.
Apply that offset when computing the target index for virtualizer.scrollToIndex(...).
Add a unit test covering the offset case to ensure the correct rendered item is centered.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
`apps/meteor/client/views/room/MessageList/MessageList.tsx`	Computes/passes the leading rendered-item offset (based on whether the list renders a top row) into the jump hook.
`apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts`	Adjusts the computed scroll index by the provided offset before calling `scrollToIndex`.
`apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.spec.ts`	Adds unit coverage asserting the hook scrolls to the correct rendered index when an offset is present.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

cubic-dev-ai

No issues found across 3 files

_{Re-trigger cubic}

regression: Center jumped messages in virtualized list

81737be

Copilot AI review requested due to automatic review settings May 23, 2026 16:45

macayu17 requested a review from a team as a code owner May 23, 2026 16:45

dionisio-bot Bot added the community label May 23, 2026

Copilot started reviewing on behalf of macayu17 May 23, 2026 16:45 View session

coderabbitai Bot added the type: bug label May 23, 2026

Copilot AI reviewed May 23, 2026

View reviewed changes

cubic-dev-ai Bot reviewed May 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

regression: Center jumped messages in virtualized list#40661

regression: Center jumped messages in virtualized list#40661
macayu17 wants to merge 1 commit into
RocketChat:developfrom
macayu17:feat/issue-40619-center-jumped-message

macayu17 commented May 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented May 23, 2026

Uh oh!

dionisio-bot Bot commented May 23, 2026

Uh oh!

CLAassistant commented May 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 23, 2026 •

edited

Loading

Review ran into problems

Uh oh!

Copilot AI left a comment

Uh oh!

cubic-dev-ai Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

macayu17 commented May 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented May 23, 2026

⚠️ No Changeset found

Uh oh!

dionisio-bot Bot commented May 23, 2026

Uh oh!

CLAassistant commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Review ran into problems

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

macayu17 commented May 23, 2026 •

edited by coderabbitai Bot

Loading

CLAassistant commented May 23, 2026 •

edited

Loading

coderabbitai Bot commented May 23, 2026 •

edited

Loading