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(react-utilities): useOnClickOutside check if mouseDown happens inside regardless of disable option #29061

Closed

Conversation

YuanboXue-Amber
Copy link
Contributor

@YuanboXue-Amber YuanboXue-Amber commented Sep 4, 2023

Previous Behavior

For popover with openOnContext, right click on the trigger, notice the popover is opened. Keep the mouse pressed, move the mouse outside of trigger and popoverSurface and then mouseUp, notice the popover is closed

New Behavior

Popover should not close in the above case.

Fix

The previous behavior happens because PR #28965 closes popover on mouseUp.
useOnClickOutside has a mouseDown handler to check the mouseDown happens inside trigger/popover after popover opens. On context menu click, events are mouseDown -> contextMenu -> mouseUp (unlike left click where click fires after mouseUp). Therefore when contextMenu event opens popover, it is too late to check if mouseDown happens inside trigger.
This PR makes the change to listen to mouseDown on trigger/popover regardless of popover open state.

@YuanboXue-Amber YuanboXue-Amber changed the title fix(react-utilities): fix(react-utilities): check if mouseDown happens inside regardless of disable option Sep 4, 2023
@YuanboXue-Amber YuanboXue-Amber changed the title fix(react-utilities): check if mouseDown happens inside regardless of disable option fix(react-utilities): useOnClickOutside check if mouseDown happens inside regardless of disable option Sep 4, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Sep 4, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 11 14 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 624 621 5000
Button mount 318 305 5000
Field mount 1091 1099 5000
FluentProvider mount 705 682 5000
FluentProviderWithTheme mount 77 70 10
FluentProviderWithTheme virtual-rerender 62 67 10
FluentProviderWithTheme virtual-rerender-with-unmount 80 76 10
InfoButton mount 11 14 5000 Possible regression
MakeStyles mount 865 851 50000
Persona mount 1709 1681 5000
SpinButton mount 1340 1364 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 4, 2023

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

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

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 4, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
208.067 kB
59.345 kB
208.186 kB
59.375 kB
119 B
30 B
react-datepicker-compat
DatePicker Compat
211.173 kB
58.752 kB
211.292 kB
58.769 kB
119 B
17 B
react-infobutton
InfoButton
129.184 kB
40.661 kB
129.303 kB
40.686 kB
119 B
25 B
react-infobutton
InfoLabel
132.909 kB
41.852 kB
133.028 kB
41.872 kB
119 B
20 B
react-menu
Menu (including children components)
139.369 kB
42.976 kB
139.488 kB
43.002 kB
119 B
26 B
react-menu
Menu (including selectable components)
142.105 kB
43.507 kB
142.224 kB
43.535 kB
119 B
28 B
react-popover
Popover
118.438 kB
37.318 kB
118.557 kB
37.339 kB
119 B
21 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)
91.384 kB
27.926 kB
react-alert
Alert
84.549 kB
23.128 kB
react-avatar
Avatar
49.738 kB
15.631 kB
react-avatar
AvatarGroup
18.584 kB
7.448 kB
react-avatar
AvatarGroupItem
64.39 kB
19.977 kB
react-badge
Badge
25.793 kB
8.348 kB
react-badge
CounterBadge
26.694 kB
8.658 kB
react-badge
PresenceBadge
24.75 kB
8.96 kB
react-button
Button
39.658 kB
10.79 kB
react-button
CompoundButton
47.013 kB
12.284 kB
react-button
MenuButton
44.085 kB
12.041 kB
react-button
SplitButton
52.111 kB
13.612 kB
react-button
ToggleButton
56.746 kB
12.698 kB
react-card
Card - All
91.249 kB
26.409 kB
react-card
Card
86.038 kB
24.868 kB
react-card
CardFooter
11.951 kB
5.031 kB
react-card
CardHeader
14.237 kB
5.798 kB
react-card
CardPreview
12.903 kB
5.408 kB
react-checkbox
Checkbox
35.614 kB
11.771 kB
react-combobox
Combobox (including child components)
90.383 kB
29.52 kB
react-combobox
Dropdown (including child components)
88.738 kB
29.167 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.517 kB
19.64 kB
react-components
react-components: FluentProvider & webLightTheme
40.713 kB
13.509 kB
react-dialog
Dialog (including children components)
89.917 kB
27.447 kB
react-divider
Divider
19.704 kB
7.38 kB
react-field
Field
21.036 kB
8.091 kB
react-image
Image
14.62 kB
5.869 kB
react-input
Input
25.955 kB
8.81 kB
react-jsx-runtime
Classic Pragma
1.072 kB
544 B
react-jsx-runtime
JSX Dev Runtime
2.775 kB
1.29 kB
react-jsx-runtime
JSX Runtime
3.293 kB
1.529 kB
react-label
Label
13.036 kB
5.405 kB
react-link
Link
15.902 kB
6.506 kB
react-overflow
hooks only
12.594 kB
4.702 kB
react-persona
Persona
56.629 kB
17.505 kB
react-portal
Portal
12.362 kB
4.543 kB
react-portal-compat
PortalCompatProvider
6.541 kB
2.227 kB
react-positioning
usePositioning
25.245 kB
9.141 kB
react-progress
ProgressBar
16.409 kB
6.58 kB
react-provider
FluentProvider
21.258 kB
7.937 kB
react-radio
Radio
29.318 kB
9.699 kB
react-radio
RadioGroup
14.344 kB
5.942 kB
react-select
Select
27.324 kB
9.773 kB
react-slider
Slider
36.849 kB
12.171 kB
react-spinbutton
SpinButton
35.53 kB
11.367 kB
react-spinner
Spinner
22.292 kB
8.113 kB
react-switch
Switch
31.885 kB
10.356 kB
react-table
DataGrid
156.473 kB
43.597 kB
react-table
Table (Primitives only)
42.52 kB
13.286 kB
react-table
Table as DataGrid
129.333 kB
34.77 kB
react-table
Table (Selection only)
74.617 kB
20.089 kB
react-table
Table (Sort only)
73.248 kB
19.685 kB
react-tags-preview
InteractionTag
13.85 kB
5.626 kB
react-tags-preview
Tag
29.604 kB
9.567 kB
react-tags-preview
TagGroup
72.493 kB
21.628 kB
react-text
Text - Default
15.644 kB
6.223 kB
react-text
Text - Wrappers
18.817 kB
6.546 kB
react-textarea
Textarea
30.005 kB
10.156 kB
react-toast
Toast (including Toaster)
90.782 kB
27.171 kB
react-tooltip
Tooltip
51.154 kB
18.06 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 0bf811dbcaaa6b78743537d142fe4d348b457045

@size-auditor
Copy link

size-auditor bot commented Sep 4, 2023

Asset size changes

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

Baseline commit: 0bf811dbcaaa6b78743537d142fe4d348b457045 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 4, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@YuanboXue-Amber
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@YuanboXue-Amber
Copy link
Contributor Author

Close as we decide to revert the original PR that causes the issue: #29065

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants