Skip to content

feat(TreeView): add IsAutoScrollIntoView parameter#7585

Merged
ArgoZhang merged 5 commits intomainfrom
feat-tv
Jan 26, 2026
Merged

feat(TreeView): add IsAutoScrollIntoView parameter#7585
ArgoZhang merged 5 commits intomainfrom
feat-tv

Conversation

@ArgoZhang
Copy link
Member

@ArgoZhang ArgoZhang commented Jan 26, 2026

Link issues

fixes #7584

Summary By Copilot

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

New Features:

  • Introduce an IsAutoScrollIntoView parameter on TreeView to control whether the active selected node is automatically scrolled into view.

Copilot AI review requested due to automatic review settings January 26, 2026 06:54
@bb-auto bb-auto bot added the enhancement New feature or request label Jan 26, 2026
@bb-auto bb-auto bot added this to the v10.2.0 milestone Jan 26, 2026
@sourcery-ai
Copy link
Contributor

sourcery-ai bot commented Jan 26, 2026

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adds 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 changes

sequenceDiagram
    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
Loading

Class diagram for updated TreeView auto-scroll behavior

classDiagram
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
Loading

File-Level Changes

Change Details Files
Introduce optional automatic scroll-into-view behavior for the active TreeView item and wire it into lifecycle and activation paths.
  • Add IsAutoScrollIntoView component parameter with XML documentation for configuring automatic scrolling of the active node.
  • Introduce private _scrollIntoView flag to control when scrolling should be triggered.
  • Set _scrollIntoView during initial active item setup and when SetActiveItem is called so that the newly active node will be scrolled into view on the next render.
  • Reset _scrollIntoView when keyboard arrow navigation triggers its own scroll logic to avoid duplicate scrolling.
  • In OnAfterRenderAsync, when IsAutoScrollIntoView is enabled and _scrollIntoView is true, invoke the existing JS scroll helper with ScrollIntoViewOptions and then clear the flag.
src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
src/BootstrapBlazor/BootstrapBlazor.csproj

Assessment against linked issues

Issue Objective Addressed Explanation
#7584 Add an IsAutoScrollIntoView parameter to the TreeView component API, exposed as a [Parameter] property with appropriate documentation.
#7584 Implement behavior so that when IsAutoScrollIntoView is enabled, the active/selected TreeView node is automatically scrolled into view at appropriate times (e.g., on initial selection or when the active item changes).

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey - I've left some high level feedback:

  • 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.
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`.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@codecov
Copy link

codecov bot commented Jan 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (81ea9d1) to head (7849e48).
⚠️ Report is 1 commits behind head on main.

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     
Flag Coverage Δ
BB 100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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 IsAutoScrollIntoView parameter to TreeView<TItem> and implemented an after-render auto-scroll trigger.
  • Introduced an internal _scrollIntoView flag to control when scroll should occur (initialization and SetActiveItem).
  • Bumped BootstrapBlazor package version to 10.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

  • ScrollIntoViewOptions is documented as being used only for keyboard navigation, but it’s now also used by the new IsAutoScrollIntoView behavior (calls InvokeVoidAsync("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.

@ArgoZhang ArgoZhang merged commit 186d9ea into main Jan 26, 2026
6 checks passed
@ArgoZhang ArgoZhang deleted the feat-tv branch January 26, 2026 07:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(TreeView): add IsAutoScrollIntoView parameter

1 participant

Comments