Skip to content

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Aug 16, 2023

New Behavior

  • This PR adds closeOnIframeFocus (defaults to true) to Popover that allows to keep popovers opened if an iframe outside a popover is focused.
  • This PR adds disabledFocusOnIframe to options of useOnClickOutside() hook and covers this functionality with Cypress tests.

Related Issue(s)

Fixes #28556

@layershifter layershifter requested review from a team as code owners August 16, 2023 14:40
@github-actions github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 16, 2023
@layershifter layershifter force-pushed the feat/popover-focus-iframe branch from 5ca8987 to 5e90f62 Compare August 16, 2023 14:40
@layershifter layershifter changed the title Feat/popover focus iframe feat: add closeOnIframeFocus prop to Popover Aug 16, 2023
@layershifter layershifter force-pushed the feat/popover-focus-iframe branch from 5e90f62 to 0c14c66 Compare August 16, 2023 14:45
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 16, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.618 kB
57.845 kB
203.68 kB
57.903 kB
62 B
58 B
react-datepicker-compat
DatePicker Compat
207.372 kB
57.465 kB
207.356 kB
57.486 kB
-16 B
21 B
react-infobutton
InfoButton
125.55 kB
39.359 kB
125.612 kB
39.404 kB
62 B
45 B
react-infobutton
InfoLabel
129.221 kB
40.532 kB
129.283 kB
40.575 kB
62 B
43 B
react-menu
Menu (including children components)
135.737 kB
41.647 kB
135.721 kB
41.662 kB
-16 B
15 B
react-menu
Menu (including selectable components)
138.423 kB
42.149 kB
138.407 kB
42.17 kB
-16 B
21 B
react-popover
Popover
114.822 kB
36 kB
114.883 kB
36.034 kB
61 B
34 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.446 kB
18.441 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 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.332 kB
6.817 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
28.65 kB
9.018 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.69 kB
26.037 kB
react-tooltip
Tooltip
48.1 kB
16.875 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against f194f87b08e489e9c5d9f714e1294bb4d82b9af7

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 16, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 77 81 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 75 77 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 621 638 5000
Button mount 309 320 5000
Field mount 1130 1105 5000
FluentProvider mount 692 686 5000
FluentProviderWithTheme mount 77 81 10 Possible regression
FluentProviderWithTheme virtual-rerender 66 70 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 77 10 Possible regression
InfoButton mount 8 15 5000
MakeStyles mount 842 861 50000
Persona mount 1700 1672 5000
SpinButton mount 1363 1378 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 16, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 93 83 1.12:1
IconMinimalPerf.default 419 386 1.09:1
GridMinimalPerf.default 189 179 1.06:1
VideoMinimalPerf.default 450 426 1.06:1
HeaderMinimalPerf.default 212 201 1.05:1
ToolbarMinimalPerf.default 544 516 1.05:1
CarouselMinimalPerf.default 264 253 1.04:1
DropdownManyItemsPerf.default 410 396 1.04:1
FormMinimalPerf.default 236 228 1.04:1
ReactionMinimalPerf.default 209 201 1.04:1
SplitButtonMinimalPerf.default 2295 2216 1.04:1
AccordionMinimalPerf.default 75 73 1.03:1
DatepickerMinimalPerf.default 3566 3479 1.03:1
EmbedMinimalPerf.default 1897 1843 1.03:1
InputMinimalPerf.default 548 530 1.03:1
ItemLayoutMinimalPerf.default 707 686 1.03:1
LayoutMinimalPerf.default 204 199 1.03:1
ListMinimalPerf.default 307 299 1.03:1
MenuMinimalPerf.default 497 481 1.03:1
RefMinimalPerf.default 113 110 1.03:1
TextMinimalPerf.default 190 185 1.03:1
TooltipMinimalPerf.default 1291 1257 1.03:1
AlertMinimalPerf.default 153 150 1.02:1
BoxMinimalPerf.default 192 189 1.02:1
CardMinimalPerf.default 305 300 1.02:1
LabelMinimalPerf.default 222 218 1.02:1
ProviderMergeThemesPerf.default 667 657 1.02:1
SliderMinimalPerf.default 762 748 1.02:1
AttachmentMinimalPerf.default 79 78 1.01:1
AvatarMinimalPerf.default 107 106 1.01:1
ButtonMinimalPerf.default 89 88 1.01:1
ChatDuplicateMessagesPerf.default 152 150 1.01:1
ChatMinimalPerf.default 433 430 1.01:1
ChatWithPopoverPerf.default 195 193 1.01:1
MenuButtonMinimalPerf.default 963 956 1.01:1
AttachmentSlotsPerf.default 632 631 1:1
ButtonOverridesMissPerf.default 656 658 1:1
CheckboxMinimalPerf.default 1128 1127 1:1
FlexMinimalPerf.default 149 149 1:1
HeaderSlotsPerf.default 452 452 1:1
ListWith60ListItems.default 366 367 1:1
LoaderMinimalPerf.default 186 186 1:1
RosterPerf.default 1528 1529 1:1
PopupMinimalPerf.default 345 346 1:1
PortalMinimalPerf.default 82 82 1:1
ProviderMinimalPerf.default 203 202 1:1
RadioGroupMinimalPerf.default 258 259 1:1
StatusMinimalPerf.default 394 394 1:1
CustomToolbarPrototype.default 1465 1459 1:1
TreeMinimalPerf.default 465 465 1:1
DropdownMinimalPerf.default 1405 1418 0.99:1
ListNestedPerf.default 317 319 0.99:1
TableMinimalPerf.default 225 228 0.99:1
AnimationMinimalPerf.default 296 302 0.98:1
ImageMinimalPerf.default 220 225 0.98:1
TableManyItemsPerf.default 1100 1117 0.98:1
ButtonSlotsPerf.default 303 311 0.97:1
ListCommonPerf.default 382 392 0.97:1
DialogMinimalPerf.default 446 467 0.96:1
DividerMinimalPerf.default 196 205 0.96:1
SegmentMinimalPerf.default 191 200 0.96:1
SkeletonMinimalPerf.default 189 197 0.96:1
TextAreaMinimalPerf.default 276 287 0.96:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 16, 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 a3cf263:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 16, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Aug 16, 2023

Asset size changes

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

Baseline commit: f194f87b08e489e9c5d9f714e1294bb4d82b9af7 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 16, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@layershifter layershifter force-pushed the feat/popover-focus-iframe branch from 0c14c66 to a3cf263 Compare August 28, 2023 10:22
@layershifter layershifter enabled auto-merge (squash) August 28, 2023 10:23
@layershifter layershifter merged commit 2147e3d into microsoft:master Aug 28, 2023
bsunderhus pushed a commit to bsunderhus/fluentui that referenced this pull request Aug 28, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (23 commits)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (26 commits)
  chore: Make triage bot add needs triage label to new issues (microsoft#28994)
  fix(react-tags-preview): use regular icon for dismiss (microsoft#28958)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  ...
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.

[Feature]: Popup provides a way to not dismiss when a focus event fires from iframe

4 participants