-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature(react-tree): preventScroll on navigation #31577
feature(react-tree): preventScroll on navigation #31577
Conversation
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
FluentProviderWithTheme | mount | 76 | 87 | 10 | Possible regression |
All results
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 638 | 626 | 5000 | |
Button | mount | 309 | 308 | 5000 | |
Field | mount | 1134 | 1141 | 5000 | |
FluentProvider | mount | 692 | 702 | 5000 | |
FluentProviderWithTheme | mount | 76 | 87 | 10 | Possible regression |
FluentProviderWithTheme | virtual-rerender | 42 | 34 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 74 | 76 | 10 | |
MakeStyles | mount | 881 | 869 | 50000 | |
Persona | mount | 1766 | 1731 | 5000 | |
SpinButton | mount | 1424 | 1416 | 5000 | |
SwatchPicker | mount | 1549 | 1541 | 5000 |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
📊 Bundle size report
Unchanged fixtures
|
packages/react-components/react-tree/src/components/Tree/Tree.types.ts
Outdated
Show resolved
Hide resolved
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
🕵 fluentuiv9 No visual regressions between this PR and main |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Previous Behavior
In the nested tree when navigating, we focus on the
TreeItem
itself and since that item includes all its children nested inside of it the browser will automatically scroll that whole item into view (see #31557).New Behavior
preventScroll
andisScrollPrevented
methods toonNavigation
data parameter. WhenpreventScroll
is invoked then the navigation focus will not scroll to the element while focusing (see preventScroll)With this feature now it's possible to maintain navigation as is while opting out of the scroll mechanism, allowing the user to create its own (in the case of #31557 we could just scroll into the
TreeItemLayout
instead of theTreeItem
when navigating)Related Issue(s)