Skip to content

fix: overflowManager should always dispatch initial state#27756

Merged
ling1726 merged 2 commits intomicrosoft:masterfrom
ling1726:fix/use-is-overflow-visible
May 9, 2023
Merged

fix: overflowManager should always dispatch initial state#27756
ling1726 merged 2 commits intomicrosoft:masterfrom
ling1726:fix/use-is-overflow-visible

Conversation

@ling1726
Copy link
Contributor

@ling1726 ling1726 commented May 4, 2023

Fixes #27656 which was caused by a priority queue edge case.

On initial mount the resize observer will always run. If there is already overflow then the tops of the visibility queues will be different from the initial state (all items are considered visible by default).

In the cause where there is no overflow initially the queue tops will not change, which does not trigger a dispatch to the react bindings so the useIsOverflowItemVisible hook will always return false until overflow occurs.

The fix is quite simple: set the initial value of flag forceDispatch to be true which will always trigger a dispatch for initial mount.

@ling1726
fix: overflowManager should always dispatch initial state
6f135d7 
Fixes microsoft#27656 which was caused by a priority queue edge case.

On initial mount the resize observer will always run. If there is
already overflow then the tops of the visibility queues will be
different from the initial state (all items are considered visible by
default).

In the cause where there is no overflow initially the queue tops will
not change, which does not trigger a dispatch to the react bindings so
the `useIsOverflowItemVisible` hook will always return `false` until
overflow occurs.

The fix is quite simple: set the initial value of flag `forceDispatch`
to be `true` which will always trigger a dispatch for initial mount.
@github-actions github-actions bot added this to the May Project Cycle Q2 2023 milestone May 4, 2023
@ling1726 ling1726 marked this pull request as ready for review May 4, 2023 08:51
@ling1726 ling1726 requested a review from a team as a code owner May 4, 2023 08:51
@size-auditor
Copy link

size-auditor bot commented May 4, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f0b05741d812ad90c52754b0b4035d5554cf2aa0 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 4, 2023

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.

Latest deployment of this branch, based on commit 03be8ab:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
objective-field-701285 Issue #27656

@fabricteam
Copy link
Collaborator

fabricteam commented May 4, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
priority-overflow
createOverflowManager		 3.194 kB
1.314 kB		 3.194 kB
1.315 kB
1 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme		 65.31 kB
17.931 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 204.34 kB
57.141 kB
react-components
react-components: FluentProvider & webLightTheme		 36.086 kB
11.9 kB
react-overflow
hooks only		 11.214 kB
4.271 kB
react-portal-compat
PortalCompatProvider		 6.446 kB
2.186 kB
🤖 This report was generated against f0b05741d812ad90c52754b0b4035d5554cf2aa0

@fabricteam
Copy link
Collaborator

fabricteam commented May 4, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 108 107 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 692 696 5000
Button mount 396 396 5000
Field mount 1224 1243 5000
FluentProvider mount 785 780 5000
FluentProviderWithTheme mount 108 107 10 Possible regression
FluentProviderWithTheme virtual-rerender 99 107 10
FluentProviderWithTheme virtual-rerender-with-unmount 106 105 10
InfoButton mount 22 19 5000
MakeStyles mount 1157 1160 50000
Persona mount 1897 1846 5000
SpinButton mount 1478 1458 5000

@ling1726 ling1726 merged commit 4e90c5c into microsoft:master May 9, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 10, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-header
a6a3377 
* master:
  feat(react-drawer): create DrawerBody component (microsoft#27581)
  feat(react-tree): TreeItem itemType restructure (microsoft#27799)
  feat: Implement state management for toasts (microsoft#27800)
  bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802)
  fix: overflowManager should always dispatch initial state (microsoft#27756)
  fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780)
  react-tags: rename dismissable to dismissible (microsoft#27798)
  chore: update ownership of react-tags (microsoft#27795)
  applying package updates
  feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725)
  RFC appearance migration (microsoft#24181)
  chore(react-skeleton): Release react-skeleton to stable (microsoft#27767)
  fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782)
  applying package updates
  fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 10, 2023
@marcosmoura
Merge branch 'feat/drawer-header' into feat/split-drawer
8c3385f 
* feat/drawer-header:
  fix: add changefiles
  feat(react-drawer): create DrawerBody component (microsoft#27581)
  feat(react-tree): TreeItem itemType restructure (microsoft#27799)
  feat: Implement state management for toasts (microsoft#27800)
  bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802)
  fix: overflowManager should always dispatch initial state (microsoft#27756)
  fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780)
  react-tags: rename dismissable to dismissible (microsoft#27798)
  chore: update ownership of react-tags (microsoft#27795)
  applying package updates
  feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725)
  RFC appearance migration (microsoft#24181)
  chore(react-skeleton): Release react-skeleton to stable (microsoft#27767)
  fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782)
  applying package updates
  fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 10, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-footer
ab506e5 
* master: (29 commits)
  feat(react-drawer): create DrawerBody component (microsoft#27581)
  feat(react-tree): TreeItem itemType restructure (microsoft#27799)
  feat: Implement state management for toasts (microsoft#27800)
  bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802)
  fix: overflowManager should always dispatch initial state (microsoft#27756)
  fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780)
  react-tags: rename dismissable to dismissible (microsoft#27798)
  chore: update ownership of react-tags (microsoft#27795)
  applying package updates
  feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725)
  RFC appearance migration (microsoft#24181)
  chore(react-skeleton): Release react-skeleton to stable (microsoft#27767)
  fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782)
  applying package updates
  fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)
  applying package updates
  fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle (microsoft#26089)
  fix: Scale pulse animation with percentages and flip wave animation's direction (microsoft#27654)
  Publish dist folder that got removed due to node 16 upgrade (microsoft#27764)
  fix(scripts-update-release-notes): properly handle git for-each-ref cmd call to not fail release notes update (microsoft#27757)
  ...
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/priority-overflow@v9.0.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request May 15, 2023
Closed
2 tasks
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented May 15, 2023

🎉@fluentui/react-overflow@v9.0.16 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

Assignees

@bsunderhus bsunderhus

Labels

None yet

Projects

None yet

Milestone

May Project Cycle Q2 2023

Development

Successfully merging this pull request may close these issues.

[Bug]: useIsOverflowItemVisible returns incorrect at initial state

5 participants

@ling1726 @fabricteam @msft-fluent-ui-bot @miroslavstastny @bsunderhus