Fluentui: Command bar flickers on resize

[Adjective-Object]

Environment Information

• __Package version(s)__: 6.119.0
• __Browser and OS versions__: Repro'd in chrome Version 71.0.3578.98, Firefox 64.0 on Windows

Please provide a reproduction of the bug in a codepen:

https://fabricweb.z5.web.core.windows.net/oufr/6.119.0/#/examples/commandbar
Scroll down to the example and resize the browser window slowly when it is thinner than the max width of the command bar

Actual behavior:

When resizing a command bar, command bar flickers the next visible item (an items is shown for a single frame, then disappears).

See https://youtu.be/Wtwo3dqRD2I

Expected behavior:

Command bar should not show the next item when all widths during resize are too small to allow the item to show

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) Yes, but I'm not sure where to look for a fix.

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[cliffkoh]

Thanks for reporting issue, and in particular thank you for the detailed repro steps (the video recording helped!)

@micahgodbolt, is this something you can take a look at, given that this bug is purely within Command Bar?

[micahgodbolt]

it appears that the copy of the command bar that is used for measurement is being displayed. It should be invisible.

[micahgodbolt]

oddly though, i'd expect the issue to also be on resizeGroup (as it does the duplicating and hiding, but it appears to be working fine).

[micahgodbolt]

Ok, last observation. It only happens on grow (not shrink).

[micahgodbolt]

@christiango any thoughts why command bar would be displaying the 'measured div' on grow data?

[christiango]

Seems strange. We don't see that for the Ribbon, which uses ResizeGroup directly instead of command bar. Were there any recent changes to command bar or resize group?

[micahgodbolt]

seems to have been added at 6.65 (I LOVE having all of these versions prebuilt).

https://fabricweb.z5.web.core.windows.net/oufr/6.65.0/#/examples/commandbar

[micahgodbolt]

@kenotron seems you broke something when removing the posinset stuff. Maybe the CacheKey changes?

https://github.com/OfficeDev/office-ui-fabric-react/commit/cc7f252b7f921c8f2ba79551ea82fa6f93e36dda

[cliffkoh]

Just adding co-assignees. I will still stay assigned as well.

[christiango]

@micahgodbolt , wow, that was awesome how quickly you were able to go back and find the regression!

[micahgodbolt]

yeah, would have taken forever without all of those prebuilt versions.

[kenotron]

I'm struggling to figure how removing aria attributes or even the cache key thing could affect it like that. I can take a look at this later tonight.

[msft-github-bot]

:tada:This issue was addressed in #7557, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site