Fix border styles when select control is active

[claviska]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Fixes a subtle style bug when the select component is active. In the GIF, observe any of the corners as the mouse is depressed. This is the same fix that was applied to FAST's select control in: microsoft/fast#5012

Before

After

Focus areas to test

(optional)

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 0301b3418f69c20819b6582b981c3c32056eb607}

[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 bce1ff3:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: 0301b3418f69c20819b6582b981c3c32056eb607 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	887	867	5000
BaseButton	mount	1025	1002	5000
Breadcrumb	mount	2943	2817	1000
ButtonNext	mount	460	508	5000
Checkbox	mount	1728	1687	5000
CheckboxBase	mount	1423	1345	5000
ChoiceGroup	mount	5189	5075	5000
ComboBox	mount	1065	1082	1000
CommandBar	mount	10685	11251	1000
ContextualMenu	mount	6458	6910	1000
DefaultButton	mount	1225	1226	5000
DetailsRow	mount	4200	4075	5000
DetailsRowFast	mount	3944	4089	5000
DetailsRowNoStyles	mount	3696	3789	5000
Dialog	mount	2276	2319	1000
DocumentCardTitle	mount	169	176	1000
Dropdown	mount	3610	3579	5000
FluentProviderNext	mount	8026	7358	5000
FocusTrapZone	mount	1948	1872	5000
FocusZone	mount	1844	1869	5000
IconButton	mount	1986	1881	5000
Label	mount	383	359	5000
Layer	mount	1992	1987	5000
Link	mount	503	500	5000
MakeStyles	mount	1957	1947	50000
MenuButton	mount	1700	1663	5000
MessageBar	mount	2222	2146	5000
Nav	mount	3635	3755	1000
OverflowSet	mount	1101	1078	5000
Panel	mount	2145	2147	1000
Persona	mount	876	921	1000
Pivot	mount	1575	1530	1000
PrimaryButton	mount	1409	1439	5000
Rating	mount	8590	8669	5000
SearchBox	mount	1474	1498	5000
Shimmer	mount	2839	2962	5000
Slider	mount	2079	2191	5000
SpinButton	mount	5453	5257	5000
Spinner	mount	446	450	5000
SplitButton	mount	3535	3508	5000
Stack	mount	536	555	5000
StackWithIntrinsicChildren	mount	1762	1782	5000
StackWithTextChildren	mount	5061	5085	5000
SwatchColorPicker	mount	11239	10925	5000
Tabs	mount	1512	1548	1000
TagPicker	mount	2744	2809	5000
TeachingBubble	mount	57467	56837	5000
Text	mount	471	447	5000
TextField	mount	1479	1520	5000
ThemeProvider	mount	1262	1297	5000
ThemeProvider	virtual-rerender	639	647	5000
Toggle	mount	900	904	5000
buttonNative	mount	119	117	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	185	168	1.1:1
HeaderSlotsPerf.default	924	864	1.07:1
RadioGroupMinimalPerf.default	545	508	1.07:1
SegmentMinimalPerf.default	400	373	1.07:1
ButtonMinimalPerf.default	206	195	1.06:1
RefMinimalPerf.default	244	231	1.06:1
SkeletonMinimalPerf.default	415	391	1.06:1
TreeWith60ListItems.default	201	189	1.06:1
ButtonOverridesMissPerf.default	1853	1764	1.05:1
ButtonSlotsPerf.default	611	581	1.05:1
DropdownManyItemsPerf.default	752	714	1.05:1
FlexMinimalPerf.default	334	317	1.05:1
ImageMinimalPerf.default	454	433	1.05:1
ListNestedPerf.default	604	574	1.05:1
StatusMinimalPerf.default	786	746	1.05:1
ToolbarMinimalPerf.default	1105	1056	1.05:1
AlertMinimalPerf.default	324	311	1.04:1
AnimationMinimalPerf.default	459	442	1.04:1
AttachmentMinimalPerf.default	179	172	1.04:1
BoxMinimalPerf.default	403	387	1.04:1
ChatDuplicateMessagesPerf.default	311	298	1.04:1
ListWith60ListItems.default	708	682	1.04:1
MenuButtonMinimalPerf.default	1785	1718	1.04:1
TableMinimalPerf.default	440	425	1.04:1
TooltipMinimalPerf.default	1173	1126	1.04:1
AvatarMinimalPerf.default	217	211	1.03:1
CardMinimalPerf.default	619	603	1.03:1
DialogMinimalPerf.default	798	777	1.03:1
LayoutMinimalPerf.default	416	402	1.03:1
TextMinimalPerf.default	384	372	1.03:1
HeaderMinimalPerf.default	429	420	1.02:1
InputMinimalPerf.default	1388	1362	1.02:1
ItemLayoutMinimalPerf.default	1384	1351	1.02:1
PopupMinimalPerf.default	625	612	1.02:1
SliderMinimalPerf.default	1720	1692	1.02:1
TableManyItemsPerf.default	2068	2020	1.02:1
ChatMinimalPerf.default	735	726	1.01:1
CheckboxMinimalPerf.default	2997	2981	1.01:1
DividerMinimalPerf.default	380	378	1.01:1
DropdownMinimalPerf.default	3201	3161	1.01:1
LabelMinimalPerf.default	436	430	1.01:1
MenuMinimalPerf.default	929	918	1.01:1
ReactionMinimalPerf.default	444	438	1.01:1
SplitButtonMinimalPerf.default	4214	4165	1.01:1
IconMinimalPerf.default	712	703	1.01:1
CarouselMinimalPerf.default	478	479	1:1
DatepickerMinimalPerf.default	6572	6641	0.99:1
FormMinimalPerf.default	477	484	0.99:1
GridMinimalPerf.default	385	388	0.99:1
LoaderMinimalPerf.default	703	708	0.99:1
ProviderMinimalPerf.default	1126	1143	0.99:1
ListCommonPerf.default	703	720	0.98:1
ListMinimalPerf.default	549	561	0.98:1
RosterPerf.default	1262	1292	0.98:1
TextAreaMinimalPerf.default	548	558	0.98:1
CustomToolbarPrototype.default	3968	4059	0.98:1
TreeMinimalPerf.default	873	896	0.97:1
EmbedMinimalPerf.default	4305	4470	0.96:1
VideoMinimalPerf.default	704	732	0.96:1
AccordionMinimalPerf.default	168	179	0.94:1
AttachmentSlotsPerf.default	1140	1211	0.94:1
ProviderMergeThemesPerf.default	1680	1779	0.94:1
ChatWithPopoverPerf.default	409	450	0.91:1

[chrisdholt]

Thanks @claviska!

[msft-fluent-ui-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release