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.

Sign up for GitHub

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

Jump to bottom

feat(useOnClickOutside): can be disabled #18005

Merged
merged 5 commits into from
Apr 30, 2021
Merged

feat(useOnClickOutside): can be disabled #18005

merged 5 commits into from
Apr 30, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Apr 30, 2021 •
edited

Pull request checklist

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

Description of changes

Allows useOnClickOutside hook to be disabled, without it, a window listener would always be created.

Also fixes a bug when controlling the menu with custom triggers, since clicking on the custom trigger would always be an outside click

Focus areas to test

(optional)

@size-auditor
Copy link

size-auditor bot commented Apr 30, 2021 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-components-Menu 118.488 kB 118.53 kB ExceedsBaseline     42 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 9865310199da206600baf8f431570913f87dfb79 (build)

@ling1726 ling1726 marked this pull request as ready for review April 30, 2021 11:47
@ling1726 ling1726 mentioned this pull request Apr 30, 2021
Merged
2 tasks
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 869 877 5000
BaseButton mount 853 847 5000
Breadcrumb mount 2519 2550 1000
ButtonNext mount 508 533 5000
Checkbox mount 1464 1474 5000
CheckboxBase mount 1234 1222 5000
ChoiceGroup mount 4459 4559 5000
ComboBox mount 980 935 1000
CommandBar mount 9736 9687 1000
ContextualMenu mount 5772 5863 1000
DefaultButton mount 1073 1089 5000
DetailsRow mount 3684 3597 5000
DetailsRowFast mount 3503 3611 5000
DetailsRowNoStyles mount 3356 3317 5000
Dialog mount 1384 1410 1000
DocumentCardTitle mount 146 138 1000
Dropdown mount 3145 3155 5000
FocusTrapZone mount 1711 1723 5000
FocusZone mount 1777 1722 5000
IconButton mount 1672 1657 5000
Label mount 329 332 5000
Layer mount 1737 1708 5000
Link mount 457 440 5000
MakeStyles mount 1753 1777 50000
MenuButton mount 1440 1388 5000
MessageBar mount 1933 1954 5000
Nav mount 3151 3169 1000
OverflowSet mount 978 1001 5000
Panel mount 1360 1385 1000
Persona mount 778 783 1000
Pivot mount 1348 1368 1000
PrimaryButton mount 1232 1259 5000
Rating mount 7245 7282 5000
SearchBox mount 1265 1250 5000
Shimmer mount 2507 2539 5000
Slider mount 1905 1895 5000
SpinButton mount 4881 4842 5000
Spinner mount 392 416 5000
SplitButton mount 3104 3056 5000
Stack mount 480 483 5000
StackWithIntrinsicChildren mount 1506 1499 5000
StackWithTextChildren mount 4369 4429 5000
SwatchColorPicker mount 10032 9930 5000
Tabs mount 1360 1357 1000
TagPicker mount 2355 2307 5000
TeachingBubble mount 11530 11475 5000
Text mount 397 422 5000
TextField mount 1317 1271 5000
ThemeProvider mount 1145 1142 5000
ThemeProvider virtual-rerender 584 570 5000
ThemeProviderNext mount 8902 9090 5000
Toggle mount 766 766 5000
buttonNative mount 101 105 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonSlotsPerf.default 537 486 1.1:1
ChatWithPopoverPerf.default 367 335 1.1:1
RadioGroupMinimalPerf.default 453 417 1.09:1
ChatDuplicateMessagesPerf.default 287 269 1.07:1
AttachmentMinimalPerf.default 149 140 1.06:1
ButtonMinimalPerf.default 166 157 1.06:1
TextMinimalPerf.default 342 322 1.06:1
PortalMinimalPerf.default 161 153 1.05:1
ButtonUseCssPerf.default 777 748 1.04:1
HeaderMinimalPerf.default 349 335 1.04:1
LoaderMinimalPerf.default 677 649 1.04:1
CardMinimalPerf.default 532 516 1.03:1
ChatMinimalPerf.default 587 572 1.03:1
DividerMinimalPerf.default 356 346 1.03:1
LayoutMinimalPerf.default 357 347 1.03:1
ListCommonPerf.default 607 589 1.03:1
AttachmentSlotsPerf.default 1091 1066 1.02:1
HeaderSlotsPerf.default 728 715 1.02:1
LabelMinimalPerf.default 378 369 1.02:1
ListNestedPerf.default 544 532 1.02:1
ListWith60ListItems.default 623 608 1.02:1
ProviderMinimalPerf.default 978 962 1.02:1
SegmentMinimalPerf.default 336 330 1.02:1
TableMinimalPerf.default 389 382 1.02:1
AnimationMinimalPerf.default 394 390 1.01:1
AvatarMinimalPerf.default 189 187 1.01:1
BoxMinimalPerf.default 336 332 1.01:1
ButtonOverridesMissPerf.default 1649 1630 1.01:1
DatepickerMinimalPerf.default 5170 5107 1.01:1
DropdownManyItemsPerf.default 649 644 1.01:1
EmbedMinimalPerf.default 3991 3969 1.01:1
AlertMinimalPerf.default 256 257 1:1
CarouselMinimalPerf.default 432 431 1:1
CheckboxMinimalPerf.default 2643 2645 1:1
GridMinimalPerf.default 321 320 1:1
ItemLayoutMinimalPerf.default 1180 1184 1:1
PopupMinimalPerf.default 679 680 1:1
ProviderMergeThemesPerf.default 1612 1609 1:1
RefMinimalPerf.default 231 230 1:1
SkeletonMinimalPerf.default 348 349 1:1
SplitButtonMinimalPerf.default 3583 3599 1:1
StatusMinimalPerf.default 666 667 1:1
CustomToolbarPrototype.default 3683 3700 1:1
TooltipMinimalPerf.default 924 925 1:1
ButtonUseCssNestingPerf.default 1025 1038 0.99:1
DropdownMinimalPerf.default 2963 2997 0.99:1
ImageMinimalPerf.default 365 367 0.99:1
InputMinimalPerf.default 1207 1225 0.99:1
ListMinimalPerf.default 473 478 0.99:1
MenuButtonMinimalPerf.default 1475 1490 0.99:1
SliderMinimalPerf.default 1537 1549 0.99:1
TableManyItemsPerf.default 1827 1852 0.99:1
VideoMinimalPerf.default 582 587 0.99:1
DialogMinimalPerf.default 713 727 0.98:1
RosterPerf.default 1112 1130 0.98:1
ToolbarMinimalPerf.default 880 898 0.98:1
TreeMinimalPerf.default 743 757 0.98:1
FormMinimalPerf.default 385 395 0.97:1
IconMinimalPerf.default 580 596 0.97:1
TextAreaMinimalPerf.default 458 470 0.97:1
FlexMinimalPerf.default 272 284 0.96:1
ReactionMinimalPerf.default 361 377 0.96:1
TreeWith60ListItems.default 158 164 0.96:1
AccordionMinimalPerf.default 141 149 0.95:1
MenuMinimalPerf.default 778 828 0.94:1

@codesandbox-ci
Copy link

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 45adfa2:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@layershifter layershifter changed the title Fix/use outside click feat(useOnClickOutside): can be disabled Apr 30, 2021
@ling1726 ling1726 merged commit 5e6aa4d into microsoft:master Apr 30, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-utilities@v9.0.0-alpha.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-theme-provider@v9.0.0-alpha.29 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabster@v9.0.0-alpha.22 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tooltip@v9.0.0-alpha.28 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-provider@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-portal@v9.0.0-alpha.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-link@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-positioning@v9.0.0-alpha.16 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-image@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-divider@v9.0.0-alpha.20 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-flex@v9.0.0-alpha.23 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-popup@v9.0.0-alpha.5 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-components@v9.0.0-alpha.39 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-context-selector@v9.0.0-alpha.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v9.0.0-alpha.17 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-cards@v1.0.0-beta.91 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-accordion@v9.0.0-alpha.24 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-avatar@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-badge@v9.0.0-alpha.33 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-button@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite@v8.2.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.22.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite-resources@v8.1.1 has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@ling1726 @miroslavstastny
feat(useOnClickOutside): can be disabled (microsoft#18005)
f256f55 
* Allow useOnClickOutside to be disabled

* just testing

* just testing

* Change files

* remove test
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@bsunderhus bsunderhus Awaiting requested review from bsunderhus

Assignees

@tomi-msft tomi-msft

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@ling1726 @fabricteam @msft-fluent-ui-bot @layershifter @tomi-msft