fix(web-components): fix toolbar stealing focus when document has moved focus to another element

[chrisdholt]

Previous Behavior

When something like a flyout was invoked from a toolbar and focus was moved manually to another node, toolbar was stealing focus.

New Behavior

Toolbar no longer steals focus

Related Issue(s)

• Fixes #

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	625	640	5000
Button	mount	297	307	5000
Field	mount	1146	1123	5000
FluentProvider	mount	707	700	5000
FluentProviderWithTheme	mount	87	81	10
FluentProviderWithTheme	virtual-rerender	39	33	10
FluentProviderWithTheme	virtual-rerender-with-unmount	79	80	10
MakeStyles	mount	874	844	50000
Persona	mount	1774	1750	5000
SpinButton	mount	1386	1393	5000

[codesandbox-ci]

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]

🕵 fluentuiv8 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	85	75	1.13:1
TreeWith60ListItems.default	89	80	1.11:1
AvatarMinimalPerf.default	120	109	1.1:1
AlertMinimalPerf.default	168	154	1.09:1
RosterPerf.default	1620	1487	1.09:1
BoxMinimalPerf.default	198	186	1.06:1
PortalMinimalPerf.default	87	82	1.06:1
LayoutMinimalPerf.default	203	194	1.05:1
IconMinimalPerf.default	393	374	1.05:1
ButtonOverridesMissPerf.default	662	639	1.04:1
ImageMinimalPerf.default	234	224	1.04:1
PopupMinimalPerf.default	358	345	1.04:1
ProviderMergeThemesPerf.default	665	641	1.04:1
TreeMinimalPerf.default	493	476	1.04:1
AnimationMinimalPerf.default	309	300	1.03:1
ButtonSlotsPerf.default	307	298	1.03:1
ChatDuplicateMessagesPerf.default	155	150	1.03:1
CheckboxMinimalPerf.default	1157	1122	1.03:1
ListNestedPerf.default	323	313	1.03:1
ProviderMinimalPerf.default	206	200	1.03:1
RefMinimalPerf.default	108	105	1.03:1
TableMinimalPerf.default	235	228	1.03:1
CustomToolbarPrototype.default	1501	1457	1.03:1
CarouselMinimalPerf.default	258	253	1.02:1
DividerMinimalPerf.default	207	202	1.02:1
GridMinimalPerf.default	187	183	1.02:1
ItemLayoutMinimalPerf.default	714	702	1.02:1
LabelMinimalPerf.default	223	219	1.02:1
ListCommonPerf.default	394	385	1.02:1
LoaderMinimalPerf.default	201	198	1.02:1
MenuButtonMinimalPerf.default	965	944	1.02:1
RadioGroupMinimalPerf.default	266	261	1.02:1
AccordionMinimalPerf.default	89	88	1.01:1
CardMinimalPerf.default	311	309	1.01:1
ChatMinimalPerf.default	436	433	1.01:1
DatepickerMinimalPerf.default	3700	3655	1.01:1
DialogMinimalPerf.default	448	442	1.01:1
DropdownManyItemsPerf.default	387	382	1.01:1
EmbedMinimalPerf.default	1881	1860	1.01:1
FlexMinimalPerf.default	154	152	1.01:1
HeaderMinimalPerf.default	206	203	1.01:1
InputMinimalPerf.default	547	541	1.01:1
SliderMinimalPerf.default	755	746	1.01:1
HeaderSlotsPerf.default	478	477	1:1
MenuMinimalPerf.default	503	505	1:1
SkeletonMinimalPerf.default	204	204	1:1
DropdownMinimalPerf.default	1430	1446	0.99:1
ListWith60ListItems.default	377	381	0.99:1
ToolbarMinimalPerf.default	534	542	0.99:1
TooltipMinimalPerf.default	1264	1276	0.99:1
AttachmentSlotsPerf.default	636	647	0.98:1
SplitButtonMinimalPerf.default	2230	2267	0.98:1
TableManyItemsPerf.default	1094	1115	0.98:1
TextMinimalPerf.default	193	196	0.98:1
ReactionMinimalPerf.default	207	214	0.97:1
SegmentMinimalPerf.default	190	195	0.97:1
ButtonMinimalPerf.default	88	92	0.96:1
TextAreaMinimalPerf.default	277	288	0.96:1
VideoMinimalPerf.default	425	442	0.96:1
FormMinimalPerf.default	217	228	0.95:1
StatusMinimalPerf.default	386	407	0.95:1
ChatWithPopoverPerf.default	196	208	0.94:1
ListMinimalPerf.default	300	318	0.94:1

[fabricteam]

🕵 FluentUIV0 No visual regressions between this PR and main

[fabricteam]

📊 Bundle size report

✅ No changes found

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	622	616	5000
Breadcrumb	mount	1675	1662	1000
Checkbox	mount	1687	1664	5000
CheckboxBase	mount	1484	1470	5000
ChoiceGroup	mount	2937	2960	5000
ComboBox	mount	638	684	1000
CommandBar	mount	6299	6220	1000
ContextualMenu	mount	12833	12765	1000
DefaultButton	mount	763	734	5000
DetailsRow	mount	2196	2183	5000
DetailsRowFast	mount	2191	2177	5000
DetailsRowNoStyles	mount	2006	2067	5000
Dialog	mount	2630	2663	1000
DocumentCardTitle	mount	232	228	1000
Dropdown	mount	2034	1978	5000
FocusTrapZone	mount	1161	1151	5000
FocusZone	mount	1084	1073	5000
GroupedList	mount	41740	42091	2
GroupedList	virtual-rerender	20111	19962	2
GroupedList	virtual-rerender-with-unmount	50396	50977	2
GroupedListV2	mount	230	223	2
GroupedListV2	virtual-rerender	212	205	2
GroupedListV2	virtual-rerender-with-unmount	224	220	2
IconButton	mount	1098	1076	5000
Label	mount	333	341	5000
Layer	mount	2739	2734	5000
Link	mount	390	381	5000
MenuButton	mount	957	930	5000
MessageBar	mount	21491	21466	5000
Nav	mount	1911	1945	1000
OverflowSet	mount	765	789	5000
Panel	mount	1792	1792	1000
Persona	mount	726	738	1000
Pivot	mount	878	884	1000
PrimaryButton	mount	841	825	5000
Rating	mount	4579	4558	5000
SearchBox	mount	911	920	5000
Shimmer	mount	1833	1836	5000
Slider	mount	1320	1303	5000
SpinButton	mount	2883	2909	5000
Spinner	mount	387	392	5000
SplitButton	mount	1834	1795	5000
Stack	mount	402	401	5000
StackWithIntrinsicChildren	mount	858	849	5000
StackWithTextChildren	mount	2636	2594	5000
SwatchColorPicker	mount	6158	6216	5000
TagPicker	mount	1468	1439	5000
Text	mount	366	375	5000
TextField	mount	918	901	5000
ThemeProvider	mount	832	842	5000
ThemeProvider	virtual-rerender	580	579	5000
ThemeProvider	virtual-rerender-with-unmount	1285	1268	5000
Toggle	mount	606	599	5000
buttonNative	mount	185	197	5000