Skip to content
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

bugfix(react-tree): ensure roving tab index when children changes #31595

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Jun 6, 2024

Previous Behavior

New Behavior

  1. adds useEffect to ensure that if no element is currently with tabindex=0 then the roved element should be recalculated.
  2. adds test to ensure behavior

Related Issue(s)

@bsunderhus bsunderhus self-assigned this Jun 6, 2024
@bsunderhus bsunderhus changed the title bugfix(react-tree): ensure roving tab index when children content cha… bugfix(react-tree): ensure roving tab index when children changes Jun 6, 2024
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 6, 2024
@bsunderhus bsunderhus marked this pull request as ready for review June 6, 2024 09:33
@bsunderhus bsunderhus requested a review from a team as a code owner June 6, 2024 09:33
Copy link

codesandbox-ci bot commented Jun 6, 2024

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.

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 37 33 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 79 75 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 618 638 5000
Button mount 289 305 5000
Field mount 1160 1137 5000
FluentProvider mount 711 718 5000
FluentProviderWithTheme mount 80 90 10
FluentProviderWithTheme virtual-rerender 37 33 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 79 75 10 Possible regression
MakeStyles mount 864 857 50000
Persona mount 1750 1716 5000
SpinButton mount 1355 1419 5000
SwatchPicker mount 1558 1508 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.092 MB
269.637 kB
1.092 MB
269.647 kB
66 B
10 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
212.636 kB
61.23 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
🤖 This report was generated against 058a0947d9a4fc6e0ac806c08afef4fc88d9f3b5

@bsunderhus bsunderhus merged commit becc7cd into microsoft:master Jun 6, 2024
19 of 20 checks passed
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
ling1726 added a commit to ling1726/fluentui that referenced this pull request Jul 4, 2024
unmounted

Follow up from microsoft#31595

The current tree item with tabindex 0 can be unmounted but kept as a
reference in side the navigation state. This causes the update to be
skipped even when in reality there is no tabbable item.

Adds an extra check that the current item is in DOM to fix for this case
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: FlatTree is not navigable when 0 item is in the tree on initial render
3 participants