Conversation
Reviewer's guide (collapsed on small PRs)Reviewer's GuideAdds an optional auto-scroll behavior to TreeView so that the active node can be automatically scrolled into view when it changes, while preserving existing keyboard navigation scrolling behavior. Sequence diagram for TreeView auto-scroll when active item changessequenceDiagram
actor User
participant ParentComponent
participant TreeView
participant JSRuntime as JSInterop
User->>ParentComponent: Interact to change active node
ParentComponent->>TreeView: SetActiveItem(newActiveItem)
activate TreeView
TreeView->>TreeView: _activeItem = newActiveItem
TreeView->>TreeView: _activeItem.SetParentExpand(true)
TreeView->>TreeView: _scrollIntoView = true
TreeView->>TreeView: StateHasChanged()
deactivate TreeView
Note over TreeView: Component re-renders
TreeView->>TreeView: OnAfterRenderAsync(firstRender = false)
alt Keyboard navigation scroll
TreeView->>TreeView: if _keyboardArrowUpDownTrigger
TreeView->>TreeView: _scrollIntoView = false
TreeView->>TreeView: _keyboardArrowUpDownTrigger = false
TreeView->>JSRuntime: InvokeVoidAsync(scroll, Id, ScrollIntoViewOptions)
else Auto scroll on active change
TreeView->>TreeView: if IsAutoScrollIntoView && _scrollIntoView
TreeView->>TreeView: _scrollIntoView = false
TreeView->>JSRuntime: InvokeVoidAsync(scroll, Id, ScrollIntoViewOptions)
end
Class diagram for updated TreeView auto-scroll behaviorclassDiagram
class TreeView~TItem~ {
%% Public parameters
bool EnableKeyboard
bool IsAutoScrollIntoView
object ScrollIntoViewOptions
%% Internal state
bool _shouldRender
bool _init
bool _scrollIntoView
bool _keyboardArrowUpDownTrigger
string _searchText
TreeViewItem~TItem~ _activeItem
%% Lifecycle methods
Task OnParametersSetAsync()
Task OnAfterRenderAsync(bool firstRender)
%% Public methods
void SetActiveItem(TreeViewItem~TItem~ item)
Task InvokeVoidAsync(string identifier, object arg1)
Task InvokeVoidAsync(string identifier, object arg1, object arg2)
}
class TreeViewItem~TItem~ {
void SetParentExpand~TComponent, TModel~(bool expand)
}
TreeView~TItem~ "1" o--> "*" TreeViewItem~TItem~ : contains
TreeView~TItem~ ..> TreeViewItem~TItem~ : setsActiveItem
%% Auto scroll control flow relations
TreeView~TItem~ ..> TreeView~TItem~ : sets _scrollIntoView in OnParametersSetAsync
TreeView~TItem~ ..> TreeView~TItem~ : resets _scrollIntoView in OnAfterRenderAsync
TreeView~TItem~ ..> TreeView~TItem~ : sets _scrollIntoView in SetActiveItem
TreeView~TItem~ ..> InvokeVoidAsync : calls scroll when IsAutoScrollIntoView && _scrollIntoView
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The
_scrollIntoViewflag is now toggled in several places (OnParametersSetAsync,OnAfterRenderAsync,SetActiveItem); consider encapsulating this behavior in a small helper method (e.g.,RequestScrollIntoView()) to avoid future inconsistencies when additional call sites are added. - The new parameter name
IsAutoScrollIntoViewis the only boolean parameter using anIs-prefix in this component (e.g.,EnableKeyboard); for consistency and clearer API, consider renaming it toAutoScrollIntoViewunless there is an established naming convention requiringIs.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `_scrollIntoView` flag is now toggled in several places (`OnParametersSetAsync`, `OnAfterRenderAsync`, `SetActiveItem`); consider encapsulating this behavior in a small helper method (e.g., `RequestScrollIntoView()`) to avoid future inconsistencies when additional call sites are added.
- The new parameter name `IsAutoScrollIntoView` is the only boolean parameter using an `Is`-prefix in this component (e.g., `EnableKeyboard`); for consistency and clearer API, consider renaming it to `AutoScrollIntoView` unless there is an established naming convention requiring `Is`.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7585 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 749 749
Lines 32972 32982 +10
Branches 4576 4577 +1
=========================================
+ Hits 32972 32982 +10
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Adds an opt-in parameter on TreeView to automatically scroll the active node into view, aligning programmatic selection/initial active node with a smoother UX.
Changes:
- Added
IsAutoScrollIntoViewparameter toTreeView<TItem>and implemented an after-render auto-scroll trigger. - Introduced an internal
_scrollIntoViewflag to control when scroll should occur (initialization andSetActiveItem). - Bumped
BootstrapBlazorpackage version to10.2.4-beta01.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs | Adds IsAutoScrollIntoView and hooks auto-scroll into the render lifecycle and SetActiveItem. |
| src/BootstrapBlazor/BootstrapBlazor.csproj | Updates package version for the new feature release. |
Comments suppressed due to low confidence (1)
src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs:260
ScrollIntoViewOptionsis documented as being used only for keyboard navigation, but it’s now also used by the newIsAutoScrollIntoViewbehavior (callsInvokeVoidAsync("scroll", ...)). Please update the XML docs to reflect that these options apply to both keyboard navigation and auto-scroll into view, so consumers aren’t misled.
/// <summary>
/// <para lang="zh">获得/设置 键盘导航时的滚动至视图选项,默认为 null,使用 { behavior: "smooth", block: "nearest", inline: "start" }</para>
/// <para lang="en">Gets or sets the scroll into view options for keyboard navigation. Default is null, using { behavior: "smooth", block: "nearest", inline: "start" }</para>
/// </summary>
[Parameter]
public ScrollIntoViewOptions? ScrollIntoViewOptions { get; set; }
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Link issues
fixes #7584
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
New Features: