Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Dropdown): fix the downshift handler #12625

Merged
merged 3 commits into from
Apr 14, 2020
Merged

fix(Dropdown): fix the downshift handler #12625

merged 3 commits into from
Apr 14, 2020

Conversation

silviuaavram
Copy link
Contributor

@silviuaavram silviuaavram commented Apr 9, 2020

Pull request checklist

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

Description of changes

Should fix the double rendering that makes the opening/closing appear slow.
Should also fix closing by blur on outside click.

I handled the state changes from downshift better. Both issues should be fixed now.

Focus areas to test

ToDo: e2e test for outside click if possible.

Closes #12578

Microsoft Reviewers: Open in CodeFlow

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 9, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 731 728 5000
Checkbox 1832 1712 5000
CheckboxBase 1317 1304 5000
ChoiceGroup 4913 5019 5000
ComboBox 924 905 1000
CommandBar 7018 7026 1000
DefaultButton 989 979 5000
DetailsRow 3265 3234 5000
DetailsRow (fast icons) 3126 3149 5000
DetailsRow without styles 2917 2989 5000
Dialog 1360 1376 1000
DocumentCardTitle with truncation 1580 1555 1000
Dropdown 2681 2779 5000
FocusZone 1541 1528 5000
IconButton 1532 1491 5000
Label 428 426 5000
Link 406 409 5000
MenuButton 1277 1310 5000
Nav 2921 2880 1000
Panel 1380 1353 1000
Persona 757 750 1000
Pivot 1186 1241 1000
PrimaryButton 1114 1110 5000
SearchBox 1389 1399 5000
Slider 1705 1692 5000
Spinner 356 373 5000
SplitButton 2796 2755 5000
Stack 433 425 5000
Stack with Intrinsic children 1001 1002 5000
Stack with Text children 3675 3665 5000
TagPicker 2479 2490 5000
Text 335 339 5000
TextField 1586 1590 5000
Toggle 795 802 5000
button 62 52 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.53 0.47 1.13:1 2000 1067
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 475
🔧 Checkbox.Fluent 0.75 0.37 2.03:1 1000 754
🔧 Dialog.Fluent 0.4 0.18 2.22:1 5000 2021
🔧 Dropdown.Fluent 3.92 0.45 8.71:1 1000 3919
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 670
🎯 Image.Fluent 0.07 0.09 0.78:1 5000 363
🔧 Slider.Fluent 1.62 0.42 3.86:1 1000 1618
🔧 Text.Fluent 0.06 0.02 3:1 5000 324
🦄 Tooltip.Fluent 0.12 17.22 0.01:1 5000 592

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TableMinimalPerf.default 688 620 1.11:1
IconMinimalPerf.default 636 594 1.07:1
FlexMinimalPerf.default 280 263 1.06:1
LayoutMinimalPerf.default 668 628 1.06:1
TreeMinimalPerf.default 1207 1137 1.06:1
DropdownMinimalPerf.default 4030 3848 1.05:1
SegmentMinimalPerf.default 1128 1070 1.05:1
Checkbox.Fluent 754 716 1.05:1
Image.Fluent 363 345 1.05:1
CardMinimalPerf.default 387 371 1.04:1
Tooltip.Fluent 592 570 1.04:1
MenuButtonMinimalPerf.default 1596 1551 1.03:1
PopupMinimalPerf.default 244 237 1.03:1
VideoMinimalPerf.default 855 833 1.03:1
Icon.Fluent 670 653 1.03:1
ButtonSlotsPerf.default 616 605 1.02:1
EmbedMinimalPerf.default 5674 5547 1.02:1
FormMinimalPerf.default 922 908 1.02:1
GridMinimalPerf.default 853 834 1.02:1
ListMinimalPerf.default 462 452 1.02:1
LoaderMinimalPerf.default 1138 1115 1.02:1
ProviderMergeThemesPerf.default 1542 1514 1.02:1
ReactionMinimalPerf.default 2542 2494 1.02:1
Button.Fluent 475 466 1.02:1
Dialog.Fluent 2021 1980 1.02:1
AvatarMinimalPerf.default 576 571 1.01:1
CarouselMinimalPerf.default 641 636 1.01:1
InputMinimalPerf.default 1120 1113 1.01:1
ListWith60ListItems.default 1257 1246 1.01:1
MenuMinimalPerf.default 2042 2022 1.01:1
ProviderMinimalPerf.default 644 638 1.01:1
CustomToolbarPrototype.default 3795 3762 1.01:1
Dropdown.Fluent 3919 3895 1.01:1
AttachmentSlotsPerf.default 2652 2665 1:1
ButtonMinimalPerf.default 143 143 1:1
ChatDuplicateMessagesPerf.default 423 423 1:1
DialogMinimalPerf.default 1986 1992 1:1
ItemLayoutMinimalPerf.default 2091 2087 1:1
StatusMinimalPerf.default 629 626 1:1
TextAreaMinimalPerf.default 3163 3175 1:1
Slider.Fluent 1618 1619 1:1
AlertMinimalPerf.default 626 633 0.99:1
AnimationMinimalPerf.default 630 638 0.99:1
AttachmentMinimalPerf.default 143 145 0.99:1
CheckboxMinimalPerf.default 3443 3463 0.99:1
HeaderMinimalPerf.default 529 535 0.99:1
HeaderSlotsPerf.default 1618 1631 0.99:1
ListNestedPerf.default 953 966 0.99:1
RefMinimalPerf.default 194 196 0.99:1
SplitButtonMinimalPerf.default 3656 3690 0.99:1
ToolbarMinimalPerf.default 1118 1134 0.99:1
ChatMinimalPerf.default 580 590 0.98:1
DropdownManyItemsPerf.default 1513 1550 0.98:1
HierarchicalTreeMinimalPerf.default 973 995 0.98:1
LabelMinimalPerf.default 377 386 0.98:1
SliderMinimalPerf.default 1575 1613 0.98:1
TextMinimalPerf.default 327 334 0.98:1
TreeWith60ListItems.default 226 230 0.98:1
Avatar.Fluent 1067 1090 0.98:1
ChatWithPopoverPerf.default 642 663 0.97:1
DividerMinimalPerf.default 967 992 0.97:1
ListCommonPerf.default 1041 1069 0.97:1
TooltipMinimalPerf.default 840 862 0.97:1
RadioGroupMinimalPerf.default 524 544 0.96:1
PortalMinimalPerf.default 282 298 0.95:1
BoxMinimalPerf.default 288 307 0.94:1
Text.Fluent 324 345 0.94:1
ImageMinimalPerf.default 326 350 0.93:1
AccordionMinimalPerf.default 220 243 0.91:1

@size-auditor
Copy link

size-auditor bot commented Apr 9, 2020

Asset size changes

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

Baseline commit: 3f8cd747174532bac3cb81c8a608c2b43f5ced82 (build)

@silviuaavram silviuaavram merged commit ee94376 into microsoft:master Apr 14, 2020
@silviuaavram silviuaavram deleted the fix/dropdown-refactor-bugs branch April 14, 2020 11:51
silviuaavram added a commit that referenced this pull request Apr 15, 2020
* improve the downshift state handler

* changelog

(cherry picked from commit ee94376)
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
* improve the downshift state handler

* changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

react-northstar Dropdown not closing on click
4 participants