fix(tooltiphost): Show V8 tooltips correctly in react 18 strict mode by andyrooger · Pull Request #28232 · microsoft/fluentui

andyrooger · 2023-06-15T22:40:15Z

Previous Behavior

In react 18, strict mode, tooltips are not shown when hovering over the TooltipHost. The reason is that when mounting, the component instance is:

Constructed (async object is created)
Mounted
Unmounted (async object is disposed)
Remounted

At this point async operations do nothing because the async object is still disposed. So any tooltip show delay means the toggle never triggers.

New Behavior

Async object is recreated on mount rather than constructor.

Tooltips show up on hover

Related Issue(s)

Fixes [Bug]: V8 Tooltips not shown in React 18/StrictMode #28230

size-auditor · 2023-06-15T22:49:14Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-SelectedItemsList	223.946 kB	223.994 kB	48 bytes
office-ui-fabric-react	fluentui-react-Pickers	283.99 kB	284.038 kB	48 bytes
office-ui-fabric-react	fluentui-react-FloatingPicker	233.54 kB	233.588 kB	48 bytes
office-ui-fabric-react	fluentui-react-Facepile	203.302 kB	203.35 kB	48 bytes
office-ui-fabric-react	fluentui-react-Tooltip	82.446 kB	82.494 kB	48 bytes
office-ui-fabric-react	fluentui-react-PersonaCoin	109.926 kB	109.974 kB	48 bytes
office-ui-fabric-react	fluentui-react-CommandBar	194.502 kB	194.55 kB	48 bytes
office-ui-fabric-react	fluentui-react-ColorPicker	127.834 kB	127.882 kB	48 bytes
office-ui-fabric-react	fluentui-react-Persona	109.926 kB	109.974 kB	48 bytes
office-ui-fabric-react	fluentui-react-Breadcrumb	193.39 kB	193.438 kB	48 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: d93cb0b8cb80f56e753ad18c645eeb84a9c10256 (build)

fabricteam · 2023-06-15T22:51:44Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react` Breadcrumb	`196.083 kB` `58.757 kB`	`196.131 kB` `58.76 kB`	`48 B` `3 B`
`react` ColorPicker	`129.984 kB` `40.589 kB`	`130.032 kB` `40.591 kB`	`48 B` `2 B`
`react` CommandBar	`197.362 kB` `58.46 kB`	`197.41 kB` `58.464 kB`	`48 B` `4 B`
`react` Facepile	`205.992 kB` `61.67 kB`	`206.04 kB` `61.687 kB`	`48 B` `17 B`
`react` FloatingPicker	`236.233 kB` `67.368 kB`	`236.281 kB` `67.376 kB`	`48 B` `8 B`
`react` Persona	`111.705 kB` `35.58 kB`	`111.753 kB` `35.58 kB`	`48 B`
`react` PersonaCoin	`111.705 kB` `35.58 kB`	`111.753 kB` `35.58 kB`	`48 B`
`react` Pickers	`287.603 kB` `80.607 kB`	`287.651 kB` `80.617 kB`	`48 B` `10 B`
`react` SelectedItemsList	`226.659 kB` `66.321 kB`	`226.707 kB` `66.319 kB`	`48 B` `-2 B`
`react` Tooltip	`84.225 kB` `27.277 kB`	`84.273 kB` `27.284 kB`	`48 B` `7 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react` ActivityItem	`68.833 kB` `22.613 kB`
`react` Announced	`36.473 kB` `12.628 kB`
`react` Autofill	`15.365 kB` `4.743 kB`
`react` Button	`190.127 kB` `55.019 kB`
`react` ButtonGrid	`175.918 kB` `53.25 kB`
`react` Calendar	`118.756 kB` `36.101 kB`
`react` Callout	`80.866 kB` `26.564 kB`
`react` Check	`51.062 kB` `17.152 kB`
`react` Checkbox	`57.791 kB` `19.17 kB`
`react` ChoiceGroup	`63.339 kB` `20.824 kB`
`react` ChoiceGroupOption	`56.601 kB` `18.695 kB`
`react` Coachmark	`89.704 kB` `28.407 kB`
`react` Color	`7.737 kB` `3.106 kB`
`react` ComboBox	`245.355 kB` `70.51 kB`
`react` ContextualMenu	`150.967 kB` `46.982 kB`
`react` DatePicker	`180.318 kB` `54.947 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`225.886 kB` `64.647 kB`
`react` Dialog	`205.294 kB` `61.428 kB`
`react` Divider	`17.63 kB` `6.234 kB`
`react` DocumentCard	`211.08 kB` `62.793 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`33.345 kB` `11.166 kB`
`react` Dropdown	`227.732 kB` `66.867 kB`
`react` ExtendedPicker	`94.987 kB` `27.297 kB`
`react` Fabric	`39.75 kB` `13.688 kB`
`react` FocusTrapZone	`15.831 kB` `5.54 kB`
`react` FocusZone	`53.259 kB` `16.869 kB`
`react` Grid	`175.918 kB` `53.25 kB`
`react` GroupedList	`131.636 kB` `39.657 kB`
`react` GroupedListV2	`119.324 kB` `36.822 kB`
`react` HoverCard	`93.735 kB` `29.778 kB`
`react` Icon	`49.74 kB` `16.603 kB`
`react` Icons	`65.829 kB` `24.212 kB`
`react` Image	`44.79 kB` `15.024 kB`
`react` Keytip	`78.588 kB` `25.825 kB`
`react` KeytipData	`13.585 kB` `4.418 kB`
`react` KeytipLayer	`100.422 kB` `31.128 kB`
`react` Keytips	`103.175 kB` `32.07 kB`
`react` Label	`36.347 kB` `12.639 kB`
`react` Layer	`45.683 kB` `15.585 kB`
`react` Link	`37.673 kB` `12.993 kB`
`react` List	`38.136 kB` `12.004 kB`
`react` MarqueeSelection	`72.119 kB` `21.676 kB`
`react` MessageBar	`184.707 kB` `55.523 kB`
`react` Modal	`90.409 kB` `29.213 kB`
`react` Nav	`183.442 kB` `55.093 kB`
`react` OverflowSet	`31.044 kB` `10.593 kB`
`react` Overlay	`38.784 kB` `13.401 kB`
`react` Panel	`194.946 kB` `58.34 kB`
`react` PersonaPresence	`55.928 kB` `18.715 kB`
`react` Pivot	`184.252 kB` `55.823 kB`
`react` Popup	`12.032 kB` `4.114 kB`
`react` Positioning	`21.821 kB` `7.334 kB`
`react` PositioningContainer	`70.754 kB` `22.84 kB`
`react` ProgressIndicator	`37.498 kB` `12.906 kB`
`react` Rating	`78.989 kB` `25.18 kB`
`react` ResizeGroup	`13.286 kB` `4.365 kB`
`react` ResponsiveMode	`8.078 kB` `2.95 kB`
`react` ScrollablePane	`53.538 kB` `17.113 kB`
`react` SearchBox	`182.982 kB` `55.1 kB`
`react` SelectableOption	`724 B` `413 B`
`react` Selection	`41.202 kB` `11.839 kB`
`react` Separator	`33.397 kB` `11.529 kB`
`react` Shimmer	`47.265 kB` `15.632 kB`
`react` ShimmeredDetailsList	`236.654 kB` `67.42 kB`
`react` Slider	`55.575 kB` `18.574 kB`
`react` SpinButton	`186.661 kB` `56.205 kB`
`react` Spinner	`39.691 kB` `13.815 kB`
`react` Stack	`40.761 kB` `13.931 kB`
`react` Sticky	`32.064 kB` `10.324 kB`
`react` Styling	`44.812 kB` `14.688 kB`
`react` SwatchColorPicker	`186.166 kB` `56.724 kB`
`react` TeachingBubble	`200.004 kB` `59.345 kB`
`react` Text	`35.931 kB` `12.486 kB`
`react` TextField	`78.587 kB` `24.642 kB`
`react` Theme	`42.456 kB` `13.773 kB`
`react` ThemeGenerator	`12.34 kB` `4.106 kB`
`react` TimePicker	`235.197 kB` `68.29 kB`
`react` Toggle	`44.17 kB` `15.346 kB`
`react` Utilities	`71.851 kB` `21.843 kB`
`react` Viewport	`22.945 kB` `7.292 kB`
`react` WeeklyDayPicker	`98.762 kB` `30.828 kB`
`react` WindowProvider	`1.059 kB` `541 B`

_{🤖 This report was generated against b85906d89b8695ca44eaa969bdee8ba791bc8b54}

codesandbox-ci · 2023-06-15T22:53:07Z

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.

fabricteam · 2023-06-15T22:55:56Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-06-15T23:05:05Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	618	628	5000
Breadcrumb	mount	1655	1668	1000
Checkbox	mount	1673	1658	5000
CheckboxBase	mount	1469	1456	5000
ChoiceGroup	mount	2934	3001	5000
ComboBox	mount	635	660	1000
CommandBar	mount	6202	6071	1000
ContextualMenu	mount	11279	11524	1000
DefaultButton	mount	742	753	5000
DetailsRow	mount	2208	2192	5000
DetailsRowFast	mount	2210	2186	5000
DetailsRowNoStyles	mount	1990	1979	5000
Dialog	mount	2585	2742	1000
DocumentCardTitle	mount	221	215	1000
Dropdown	mount	1971	1931	5000
FocusTrapZone	mount	1121	1133	5000
FocusZone	mount	1050	1053	5000
GroupedList	mount	41315	41673	2
GroupedList	virtual-rerender	17855	19898	2
GroupedList	virtual-rerender-with-unmount	50436	50029	2
GroupedListV2	mount	218	231	2
GroupedListV2	virtual-rerender	218	209	2
GroupedListV2	virtual-rerender-with-unmount	221	225	2
IconButton	mount	1100	1048	5000
Label	mount	341	323	5000
Layer	mount	2673	2662	5000
Link	mount	390	393	5000
MenuButton	mount	949	938	5000
MessageBar	mount	21075	21105	5000
Nav	mount	1950	1929	1000
OverflowSet	mount	757	777	5000
Panel	mount	1826	1771	1000
Persona	mount	725	757	1000
Pivot	mount	871	868	1000
PrimaryButton	mount	825	854	5000
Rating	mount	4635	4613	5000
SearchBox	mount	902	889	5000
Shimmer	mount	1873	1867	5000
Slider	mount	1349	1322	5000
SpinButton	mount	2950	2873	5000
Spinner	mount	380	385	5000
SplitButton	mount	1862	1868	5000
Stack	mount	418	417	5000
StackWithIntrinsicChildren	mount	852	856	5000
StackWithTextChildren	mount	2560	2573	5000
SwatchColorPicker	mount	6202	6053	5000
TagPicker	mount	1443	1433	5000
Text	mount	377	376	5000
TextField	mount	948	945	5000
ThemeProvider	mount	813	833	5000
ThemeProvider	virtual-rerender	577	594	5000
ThemeProvider	virtual-rerender-with-unmount	1265	1270	5000
Toggle	mount	592	608	5000
buttonNative	mount	191	188	5000

behowell

Thanks for the fix!

behowell · 2023-06-22T19:40:20Z

/azp run

azure-pipelines · 2023-06-22T19:40:43Z

Azure Pipelines successfully started running 4 pipeline(s).

andyrooger · 2023-06-30T15:46:11Z

@behowell Thanks for reviewing. Is there anything waiting on me in order to merge this or is it just a case of waiting until you guys are ready? I have another very similar PR open for pickers, too.

behowell · 2024-03-19T18:48:45Z

Apologies, this fell off my radar. I'll update the branch and re-run the builds to make sure everything is still green, then I can merge it.

behowell · 2024-03-19T19:08:28Z

/azp run

azure-pipelines · 2024-03-19T19:08:51Z

Azure Pipelines successfully started running 4 pipeline(s).

fabricteam · 2024-03-19T19:22:47Z

🕵 fluentuiv8 No visual regressions between this PR and main

…icrosoft#28232)

Recreate tooltiphost async helper on remount

9962bd0

msft-fluent-ui-bot added Component: Tooltip PR: API Modified labels Jun 15, 2023

msft-fluent-ui-bot assigned marcosmoura Jun 15, 2023

andyrooger marked this pull request as ready for review June 15, 2023 23:12

andyrooger requested review from a team and behowell as code owners June 15, 2023 23:12

behowell approved these changes Jun 22, 2023

View reviewed changes

Merge branch 'master' into 28230-tooltips-not-shown

6882176

behowell merged commit 61b2b75 into microsoft:master Mar 19, 2024

JamesBurnside mentioned this pull request Mar 28, 2024

[Bug]: Tooltip jest test regression after react 18 fix if autoMount set to true #30896

Closed

2 tasks

robertpenner pushed a commit to robertpenner/fluentui that referenced this pull request Apr 11, 2024

fix(tooltiphost): Show V8 tooltips correctly in react 18 strict mode (m…

6ee4f7e

…icrosoft#28232)

Uh oh!

Conversation

andyrooger commented Jun 15, 2023

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

size-auditor Bot commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci Bot commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

behowell commented Jun 22, 2023

Uh oh!

azure-pipelines Bot commented Jun 22, 2023

Uh oh!

andyrooger commented Jun 30, 2023

Uh oh!

behowell commented Mar 19, 2024

Uh oh!

behowell commented Mar 19, 2024

Uh oh!

azure-pipelines Bot commented Mar 19, 2024

Uh oh!

fabricteam commented Mar 19, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

size-auditor Bot commented Jun 15, 2023 •

edited

Loading

fabricteam commented Jun 15, 2023 •

edited

Loading

codesandbox-ci Bot commented Jun 15, 2023 •

edited

Loading

fabricteam commented Jun 15, 2023 •

edited

Loading

fabricteam commented Jun 15, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)