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

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

Merged
merged 3 commits into from
Sep 6, 2023

Conversation

YuanboXue-Amber
Copy link
Contributor

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

Reverts #28965 as it causes another issue:
In macOS, for popover with openOnContext, right click on the trigger, notice the popover is opened. Keep the mouse pressed, move the mouse outside and then mouseUp, notice the popover is closed, but the expected behavior is staying open.

The above happens because #28965 changes from listening to click/contextMenu event to listening to mouseUp event. On context menu click in macOS, events are mouseDown -> contextMenu -> mouseUp (unlike left click where click fires after mouseUp). Therefore the below happens when right click:

  1. mouseDown fires, no listener
  2. contextMenu fires, listener on usePopoverTrigger opens popover.
  3. Because popover is opened, useOnClickOutside attach mouseDown event listener that checks if mouseDown happens inside. And a mouseUp event listener that closes popover if mouseDown wasn't inside.
  4. mouseUp fired, mouseUp listener in step 3 is invoked. But since mouseDown listener in step 3 is never called, the mouseUp listener consider the event happens outside and closes popover. 💥

The same issue doesn't happen in windows because in windows events are mouseDown -> mouseUp -> contextMenu (similar as left click). Therefore the below happens:

  1. mouseDown fires, no listener
  2. mouseUp fires no listener
  3. contextMenu fires, listener on usePopoverTrigger opens popover.
  4. Because popover is opened, useOnClickOutside attach mouseDown/mouseUp event listener. And popover stays open. ✅

Here's a minimal repro https://codesandbox.io/s/nifty-ben-6734vt?file=/src/App.js notice on macOS it logs both mouseUp and contextMenu event, while on windows it logs only contextMenu event.

It is tricky to fix this issue because the inconsistency comes from OS ((mozilla/geckodriver#1201). Therefore this PR reverts the original PR that causes this issue, as close on clicking scrollbar has never worked in v0. Plus there's an on going PR to close popover on dragging scrollbar.

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 5, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
208.194 kB
59.365 kB
208.327 kB
59.386 kB
133 B
21 B
react-datepicker-compat
DatePicker Compat
211.3 kB
58.763 kB
211.433 kB
58.785 kB
133 B
22 B
react-infobutton
InfoButton
129.311 kB
40.674 kB
129.444 kB
40.699 kB
133 B
25 B
react-infobutton
InfoLabel
133.036 kB
41.865 kB
133.169 kB
41.891 kB
133 B
26 B
react-menu
Menu (including children components)
139.496 kB
42.99 kB
139.629 kB
43.01 kB
133 B
20 B
react-menu
Menu (including selectable components)
142.232 kB
43.523 kB
142.365 kB
43.541 kB
133 B
18 B
react-popover
Popover
118.565 kB
37.335 kB
118.698 kB
37.359 kB
133 B
24 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 94019033dfe3fd39ec0cde7dfb3b57c22805aa91

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 5, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 19 10 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 632 610 5000
Button mount 322 318 5000
Field mount 1099 1134 5000
FluentProvider mount 720 720 5000
FluentProviderWithTheme mount 83 94 10
FluentProviderWithTheme virtual-rerender 83 92 10
FluentProviderWithTheme virtual-rerender-with-unmount 85 92 10
InfoButton mount 19 10 5000 Possible regression
MakeStyles mount 876 876 50000
Persona mount 1760 1737 5000
SpinButton mount 1349 1371 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 5, 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 aa5011e:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
great-paper-3v7jkn PR

@size-auditor
Copy link

size-auditor bot commented Sep 5, 2023

Asset size changes

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

Baseline commit: 94019033dfe3fd39ec0cde7dfb3b57c22805aa91 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review September 5, 2023 15:46
@YuanboXue-Amber YuanboXue-Amber requested a review from a team as a code owner September 5, 2023 15:46
@YuanboXue-Amber YuanboXue-Amber merged commit 42ed56c into master Sep 6, 2023
@YuanboXue-Amber YuanboXue-Amber deleted the revert-28965-scrollbar branch September 6, 2023 08:53
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.

3 participants