[Northstar][Dropdown] Fix styling mutation when merging themes

[petrjaros]

Current Behavior

When overriding :active or :hover state it mutates the style object. Style override of single Dropdown stay permanent, and the style is then applied to all unrelated Dropdowns.

New Behavior

Styling of one Dropdown does not leak into other Dropdowns.

[ghost]

All CLA requirements met.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against e23edb70bfcde6fc5f82b676a1ddcf8d5a854dbd}

[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.

Latest deployment of this branch, based on commit 97c53a8:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	307	283	1.08:1
ListNestedPerf.default	480	451	1.06:1
ListWith60ListItems.default	501	480	1.04:1
LoaderMinimalPerf.default	528	510	1.04:1
RefMinimalPerf.default	190	183	1.04:1
AttachmentSlotsPerf.default	872	844	1.03:1
DividerMinimalPerf.default	318	308	1.03:1
GridMinimalPerf.default	297	289	1.03:1
HeaderMinimalPerf.default	322	312	1.03:1
HeaderSlotsPerf.default	692	674	1.03:1
SkeletonMinimalPerf.default	308	299	1.03:1
TextAreaMinimalPerf.default	417	405	1.03:1
AnimationMinimalPerf.default	473	466	1.02:1
BoxMinimalPerf.default	296	289	1.02:1
ButtonOverridesMissPerf.default	1033	1010	1.02:1
DropdownManyItemsPerf.default	541	533	1.02:1
LabelMinimalPerf.default	341	335	1.02:1
MenuButtonMinimalPerf.default	1370	1349	1.02:1
RadioGroupMinimalPerf.default	396	387	1.02:1
TextMinimalPerf.default	308	301	1.02:1
TreeWith60ListItems.default	131	129	1.02:1
AlertMinimalPerf.default	222	220	1.01:1
CheckboxMinimalPerf.default	1543	1526	1.01:1
DialogMinimalPerf.default	693	689	1.01:1
DropdownMinimalPerf.default	2176	2148	1.01:1
ImageMinimalPerf.default	341	336	1.01:1
InputMinimalPerf.default	851	843	1.01:1
ListCommonPerf.default	509	504	1.01:1
TableMinimalPerf.default	359	355	1.01:1
ToolbarMinimalPerf.default	796	791	1.01:1
TreeMinimalPerf.default	705	701	1.01:1
AccordionMinimalPerf.default	126	126	1:1
CarouselMinimalPerf.default	355	356	1:1
ChatMinimalPerf.default	641	639	1:1
DatepickerMinimalPerf.default	4679	4668	1:1
FormMinimalPerf.default	325	324	1:1
ItemLayoutMinimalPerf.default	967	964	1:1
RosterPerf.default	1714	1715	1:1
PopupMinimalPerf.default	556	554	1:1
ProviderMergeThemesPerf.default	997	993	1:1
ReactionMinimalPerf.default	335	335	1:1
SliderMinimalPerf.default	1226	1225	1:1
StatusMinimalPerf.default	607	610	1:1
TableManyItemsPerf.default	1569	1563	1:1
TooltipMinimalPerf.default	1863	1854	1:1
AvatarMinimalPerf.default	160	162	0.99:1
ButtonMinimalPerf.default	133	135	0.99:1
CardMinimalPerf.default	460	467	0.99:1
ChatDuplicateMessagesPerf.default	228	230	0.99:1
EmbedMinimalPerf.default	2631	2650	0.99:1
ListMinimalPerf.default	442	446	0.99:1
MenuMinimalPerf.default	734	739	0.99:1
PortalMinimalPerf.default	133	134	0.99:1
SplitButtonMinimalPerf.default	3256	3284	0.99:1
CustomToolbarPrototype.default	2148	2161	0.99:1
FlexMinimalPerf.default	251	255	0.98:1
LayoutMinimalPerf.default	313	318	0.98:1
ProviderMinimalPerf.default	314	321	0.98:1
VideoMinimalPerf.default	607	618	0.98:1
AttachmentMinimalPerf.default	125	129	0.97:1
ButtonSlotsPerf.default	422	433	0.97:1
SegmentMinimalPerf.default	296	305	0.97:1
IconMinimalPerf.default	550	585	0.94:1

[size-auditor]

Asset size changes

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

Baseline commit: e23edb70bfcde6fc5f82b676a1ddcf8d5a854dbd (build)

[layershifter]

Can you please provide a reproduction case for this behavior?

[petrjaros]

Here is the codesandbox: https://codesandbox.io/s/fluent-ui-example-forked-c58ijl?file=/example.js

1. Open the link. You should see two Dropdowns. Try to click both. All text should stay black. No blue text.
2. Uncomment the commented line.
3. Click dropdowns

Actual behavior:
Both Dropdowns have blue text color when clicking or when focused.
When you comment the line again, the wrong styling stays in both dropdowns even if it should not be applied at all.

Expected behavior:
The blue styling should not leak into unrelated components nor focus state.

[petrjaros]

I have accidentally created the example with older version of Fluent, but the latest (0.64.0) is also affected.

[layershifter]

@petrjaros thanks for providing the repro.

The root reason is there:

fluentui/packages/fluentui/styles/src/mergeThemes.ts

Lines 97 to 100 in a33448f

	return _.merge(
	typeof slotA === 'function' ? slotA(styleParam) : slotA,
	typeof slotB === 'function' ? slotB(styleParam) : slotB,
	);

_.merge in Lodash mutates origin:

Note: This method mutates object.

https://lodash.com/docs/4.17.15#merge

---

I talked with a team and we agreed to merge this PR instead of fixing that call to avoid potential memory issues. Especially taking into account that this call was there for ages.

[layershifter]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).