Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 17.96 GB / 31.91 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/purple-cache-gmoxf2?file=/example.tsx

Bug Description

Actual Behavior

Steps to reproduce

1. Open the sandbox with a wide screen, 5 tabs all show, select tab "Work Week"

2. Make screen size smaller (on the preview part), until you see "N More" shows

3. Sometimes, the N is incorrect (which is overflowCount from useOverflowMenu)
   an example screenshot:
   

4. If 3) is reproduced, make the screen wider, then "N More" button is gone but missing one menu
   an example screenshot:
   

5. If 3) and 4) are reproduced, randomly click on some tabs, and change screen size, sometimes will ran into the following issue:
   an example screenshot:
   

The above issue does not happen every time, I think if I change the screen size a little faster it might have higher chance to happen.

And it's not just happening on the sandbox, it happened on my project as well, and it cannot get the original menus back when I increase the screen size when working on my own project.

Expected Behavior

Expectation is the above issues should not happen.

I ticked willing to submit a PR to fix but I don't quite know what the fix is yet. Would love to investigate if I have time and have more guidance. Thank you!

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.