fix: center active mode in selector dropdown on open#7883
Merged
Conversation
- Added refs to track selected item and scroll container - Implemented scroll-to-center logic when popover opens - Selected mode now appears centered in viewport instead of list starting at top - Fixes issue where users had to manually scroll to find active mode Fixes #7882
dosubot
bot
added
size:M
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| const itemHeight = item.offsetHeight | ||
|
|
||
| // Center the item in the container | ||
| const scrollPosition = itemTop - containerHeight / 2 + itemHeight / 2 |
Contributor
Author
There was a problem hiding this comment.
Would it be valuable to add test coverage for this scroll-to-center behavior? I notice the existing tests don't verify that the selected item is actually scrolled into view when the dropdown opens.
| const item = selectedItemRef.current | ||
|
|
||
| // Calculate positions | ||
| const containerHeight = container.clientHeight |
Contributor
Author
There was a problem hiding this comment.
Consider extracting this scroll calculation logic into a utility function like scrollItemToCenter(container, item) for better testability and reusability. This would also make the component logic cleaner.
- Replace setTimeout with requestAnimationFrame for more reliable DOM synchronization - Add proper boundary checking to prevent scrolling past container limits - Ensure scroll position stays within valid bounds using Math.min/max
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Needs Review]
in Roo Code Roadmap
mrubens
approved these changes
Sep 11, 2025
github-project-automation
bot
moved this from PR [Needs Review]
to Done
in Roo Code Roadmap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR attempts to address Issue #7882 by implementing auto-scroll functionality for the mode selector dropdown.
Problem
When opening the mode selector dropdown, the list always started at the top, requiring users to manually scroll to find the currently active mode, especially problematic when the active mode was far down the list.
Solution
Added scroll-to-center logic that automatically centers the active mode in the viewport when the dropdown opens:
Changes
webview-ui/src/components/chat/ModeSelector.tsx:selectedItemRefandscrollContainerRefrefsTesting
Review Confidence
Code review completed with 95% confidence - implementation is clean and follows existing patterns.
Fixes #7882
Feedback and guidance are welcome!
Important
Centers active mode in
ModeSelector.tsxdropdown on open using scroll-to-center logic.ModeSelector.tsx.selectedItemRefandscrollContainerRefto track elements.useEffect.selectedItemRefandscrollContainerRefrefs.useEffectto calculate and set scroll position.This description was created by
for 268e6c5. You can customize this summary. It will automatically update as commits are pushed.