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

fix(react-utilities): click scrollbar should invoke callback in useOnClickOutside #28965

Merged
merged 4 commits into from
Aug 29, 2023
Merged

fix(react-utilities): click scrollbar should invoke callback in useOnClickOutside #28965

merged 4 commits into from
Aug 29, 2023

Conversation

YuanboXue-Amber
Copy link
Contributor

Fix issue 1 in #28938

Previous Behavior

In the codesandbox in the original issue: https://codesandbox.io/s/inspiring-fast-5jm9wc?file=/example.tsx
Click scrollbar in the scrollable container does not close the popover

New Behavior

I updated the useOnClickOutside to listen to mouseup instead of click so it can close the popover when clicking the scrollbar.

When scrollbar is clicked, these are the events on document during capture phase:
click-scrollbar

And on context menu click:
context-click

So we can rely on mouseup event instead of click.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 23, 2023 •
edited
Loading

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 e0b2268:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
youthful-bhabha-cynmg8 PR

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 203.817 kB
57.926 kB		 203.722 kB
57.915 kB		 -95 B
-11 B
react-datepicker-compat
DatePicker Compat		 207.356 kB
57.486 kB		 207.261 kB
57.469 kB		 -95 B
-17 B
react-infobutton
InfoButton		 125.612 kB
39.404 kB		 125.517 kB
39.389 kB		 -95 B
-15 B
react-infobutton
InfoLabel		 129.283 kB
40.575 kB		 129.188 kB
40.559 kB		 -95 B
-16 B
react-menu
Menu (including children components)		 135.721 kB
41.662 kB		 135.626 kB
41.648 kB		 -95 B
-14 B
react-menu
Menu (including selectable components)		 138.407 kB
42.17 kB		 138.312 kB
42.154 kB		 -95 B
-16 B
react-popover
Popover		 114.883 kB
36.034 kB		 114.788 kB
36.02 kB		 -95 B
-14 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
330 B
global-context
createContextSelector		 537 B
342 B
react-accordion
Accordion (including children components)		 88.688 kB
26.917 kB
react-alert
Alert		 81.668 kB
21.964 kB
react-avatar
Avatar		 47.01 kB
14.502 kB
react-avatar
AvatarGroup		 16.116 kB
6.431 kB
react-avatar
AvatarGroupItem		 61.789 kB
18.912 kB
react-badge
Badge		 23.183 kB
7.254 kB
react-badge
CounterBadge		 24.084 kB
7.553 kB
react-badge
PresenceBadge		 22.14 kB
7.867 kB
react-button
Button		 36.91 kB
9.685 kB
react-button
CompoundButton		 44.259 kB
11.167 kB
react-button
MenuButton		 41.296 kB
10.933 kB
react-button
SplitButton		 49.331 kB
12.486 kB
react-button
ToggleButton		 53.956 kB
11.582 kB
react-card
Card - All		 88.334 kB
25.252 kB
react-card
Card		 83.177 kB
23.742 kB
react-card
CardFooter		 9.338 kB
3.932 kB
react-card
CardHeader		 11.589 kB
4.707 kB
react-card
CardPreview		 10.297 kB
4.317 kB
react-checkbox
Checkbox		 32.872 kB
10.652 kB
react-combobox
Combobox (including child components)		 87.101 kB
28.273 kB
react-combobox
Dropdown (including child components)		 85.555 kB
27.926 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 66.583 kB
18.469 kB
react-components
react-components: FluentProvider & webLightTheme		 37.926 kB
12.419 kB
react-dialog
Dialog (including children components)		 86.738 kB
26.341 kB
react-divider
Divider		 17.098 kB
6.303 kB
react-field
Field		 18.295 kB
6.978 kB
react-image
Image		 12.029 kB
4.783 kB
react-input
Input		 23.237 kB
7.688 kB
react-jsx-runtime
Classic Pragma		 1.049 kB
531 B
react-jsx-runtime
JSX Dev Runtime		 2.752 kB
1.277 kB
react-jsx-runtime
JSX Runtime		 3.27 kB
1.519 kB
react-label
Label		 10.423 kB
4.31 kB
react-link
Link		 13.254 kB
5.397 kB
react-overflow
hooks only		 12.419 kB
4.687 kB
react-persona
Persona		 53.905 kB
16.371 kB
react-portal
Portal		 12.255 kB
4.504 kB
react-portal-compat
PortalCompatProvider		 6.48 kB
2.203 kB
react-positioning
usePositioning		 25.137 kB
9.109 kB
react-progress
ProgressBar		 13.718 kB
5.476 kB
react-provider
FluentProvider		 18.471 kB
6.847 kB
react-radio
Radio		 26.617 kB
8.601 kB
react-radio
RadioGroup		 11.622 kB
4.833 kB
react-select
Select		 24.599 kB
8.651 kB
react-slider
Slider		 34.134 kB
11.039 kB
react-spinbutton
SpinButton		 32.773 kB
10.216 kB
react-spinner
Spinner		 19.668 kB
7.024 kB
react-switch
Switch		 29.092 kB
9.217 kB
react-table
DataGrid		 152.991 kB
42.325 kB
react-table
Table (Primitives only)		 39.638 kB
12.129 kB
react-table
Table as DataGrid		 126.247 kB
33.617 kB
react-table
Table (Selection only)		 71.617 kB
18.915 kB
react-table
Table (Sort only)		 70.236 kB
18.516 kB
react-tags-preview
InteractionTag		 11.031 kB
4.528 kB
react-tags-preview
Tag		 27.792 kB
8.768 kB
react-tags-preview
TagGroup		 69.607 kB
20.482 kB
react-text
Text - Default		 13.043 kB
5.129 kB
react-text
Text - Wrappers		 16.215 kB
5.447 kB
react-textarea
Textarea		 27.302 kB
9.047 kB
react-toast
Toast (including Toaster)		 87.733 kB
26.042 kB
react-tooltip
Tooltip		 48.1 kB
16.875 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 3ef92a485889eee5010ed32b8fc1ec1d8127cc44

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 598 618 5000
Button mount 320 322 5000
Field mount 1104 1090 5000
FluentProvider mount 726 700 5000
FluentProviderWithTheme mount 83 77 10
FluentProviderWithTheme virtual-rerender 73 71 10
FluentProviderWithTheme virtual-rerender-with-unmount 69 77 10
InfoButton mount 11 13 5000
MakeStyles mount 865 863 50000
Persona mount 1758 1660 5000
SpinButton mount 1383 1318 5000

@YuanboXue-Amber
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@size-auditor
Copy link

size-auditor bot commented Aug 23, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 3ef92a485889eee5010ed32b8fc1ec1d8127cc44 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 23, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review August 24, 2023 08:32
@YuanboXue-Amber YuanboXue-Amber requested a review from a team as a code owner August 24, 2023 08:32
@YuanboXue-Amber YuanboXue-Amber enabled auto-merge (squash) August 29, 2023 10:17
@YuanboXue-Amber YuanboXue-Amber merged commit 17f08ac into microsoft:master Aug 29, 2023
@YuanboXue-Amber YuanboXue-Amber deleted the scrollbar branch August 29, 2023 11:03
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 29, 2023
@marcosmoura
Merge branch 'master' into feat/add-motion-to-drawer
5ee337c 
* master:
  applying package updates
  feat: release react-motion as preview (microsoft#29005)
  fix(react-utilities): click scrollbar should invoke callback in `useOnClickOutside` (microsoft#28965)
  feat: adds mountNode to DialogSurface and Toaster (microsoft#29003)
  applying package updates
  Add IconDirectionProvider to FluentProvider (microsoft#28803)
marcosmoura pushed a commit to marcosmoura/fluentui that referenced this pull request Aug 29, 2023
@YuanboXue-Amber @marcosmoura
fix(react-utilities): click scrollbar should invoke callback in `useO…
2c48266 
…nClickOutside` (microsoft#28965)

* change

* chglog

* UT
@YuanboXue-Amber YuanboXue-Amber mentioned this pull request Sep 4, 2023
Closed
YuanboXue-Amber added a commit that referenced this pull request Sep 5, 2023
@YuanboXue-Amber
Revert "fix(react-utilities): click scrollbar should invoke callback …
ea7d534 
…in `useOnClickOutside` (#28965)"

This reverts commit 17f08ac.
@YuanboXue-Amber YuanboXue-Amber mentioned this pull request Sep 5, 2023
Merged
YuanboXue-Amber added a commit that referenced this pull request Sep 6, 2023
@YuanboXue-Amber
Revert "fix(react-utilities): click scrollbar should invoke callback …
42ed56c 
…in `useOnClickOutside`" (#29065)

* Revert "fix(react-utilities): click scrollbar should invoke callback in `useOnClickOutside` (#28965)"

This reverts commit 17f08ac.

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

@ling1726 ling1726 ling1726 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@YuanboXue-Amber @fabricteam @ling1726