Skip to content

[react-interactions] Fix Hover issues with portals#17765

Merged
trueadm merged 1 commit intofacebook:masterfrom
trueadm:hover-portal-fix
Jan 7, 2020
Merged

[react-interactions] Fix Hover issues with portals#17765
trueadm merged 1 commit intofacebook:masterfrom
trueadm:hover-portal-fix

Conversation

@trueadm
Copy link
Contributor

@trueadm trueadm commented Jan 3, 2020

This PR fixes an issue discovered internally with the Hover responder and React Portals. Specifically, the onHoverEnd events were not firing when we moved focus through a React Portal. The reason for this is because, by their nature, portal nodes are within other parts of the DOM tree, that are not linked to that of the "target" portion of the tree. That means, moving into a portal will be the last time we get a pointerleave event fire because we only track pointerleave for target events. We should instead be tracking this for root events, as portals are in another part of the document. I've also added a regression test that shows this error (will fail if you revert Hover.js).

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 3, 2020

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 5f3d462:

Sandbox Source
nice-snow-7rq9x Configuration

@sizebot
Copy link

sizebot commented Jan 3, 2020

Details of bundled changes.

Comparing: cca994c...5f3d462

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/hover.production.min.js 🔺+11.4% 🔺+7.5% 2.95 KB 3.29 KB 1.08 KB 1.16 KB NODE_PROD
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.34 KB 6.34 KB 2.39 KB 2.39 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% 0.0% 6.99 KB 6.99 KB 2.21 KB 2.21 KB NODE_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.31 KB 6.31 KB 1.66 KB 1.66 KB UMD_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.3% 1.39 KB 1.39 KB 734 B 736 B UMD_PROD
react-interactions-events/focus.development.js 0.0% 0.0% 15.51 KB 15.51 KB 3.22 KB 3.23 KB NODE_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 6.01 KB 6.01 KB 1.63 KB 1.63 KB UMD_DEV
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.1% 2.45 KB 2.45 KB 1.11 KB 1.11 KB UMD_PROD
react-interactions-events/context-menu.development.js 0.0% +0.2% 2.49 KB 2.49 KB 964 B 966 B NODE_DEV
react-interactions-events/press-legacy.development.js 0.0% 0.0% 23.9 KB 23.9 KB 6.12 KB 6.13 KB UMD_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 674 B 675 B NODE_PROD
react-interactions-events/press-legacy.production.min.js 0.0% 🔺+0.1% 7.25 KB 7.25 KB 2.72 KB 2.72 KB UMD_PROD
react-interactions-events/keyboard.development.js 0.0% -0.0% 6.09 KB 6.09 KB 2.29 KB 2.29 KB UMD_DEV
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.1% 2.27 KB 2.27 KB 1.05 KB 1.05 KB NODE_PROD
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.43 KB 2.43 KB 1.24 KB 1.24 KB UMD_PROD
react-interactions-events/press-legacy.development.js 0.0% 0.0% 23.71 KB 23.71 KB 6.07 KB 6.07 KB NODE_DEV
react-interactions-events/hover.development.js +12.7% +6.5% 7.01 KB 7.9 KB 1.56 KB 1.66 KB UMD_DEV
react-interactions-events/press-legacy.production.min.js 0.0% 0.0% 7.07 KB 7.07 KB 2.67 KB 2.67 KB NODE_PROD
react-interactions-events/hover.production.min.js 🔺+10.8% 🔺+7.1% 3.13 KB 3.46 KB 1.14 KB 1.22 KB UMD_PROD
react-interactions-events/keyboard.development.js 0.0% 0.0% 5.91 KB 5.91 KB 2.25 KB 2.25 KB NODE_DEV
react-interactions-events/drag.development.js 0.0% +0.1% 5.23 KB 5.23 KB 1.54 KB 1.55 KB UMD_DEV
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.26 KB 2.26 KB 1.18 KB 1.18 KB NODE_PROD
react-interactions-events/hover.development.js +13.1% +6.8% 6.83 KB 7.72 KB 1.51 KB 1.62 KB NODE_DEV
react-interactions-events/tap.development.js 0.0% 0.0% 18.24 KB 18.24 KB 3.93 KB 3.93 KB UMD_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.1% 2.89 KB 2.89 KB 1.38 KB 1.38 KB NODE_PROD
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.2% 2.63 KB 2.63 KB 1.15 KB 1.15 KB UMD_PROD
react-interactions-events/press.development.js 0.0% 0.0% 8.21 KB 8.21 KB 2.62 KB 2.62 KB UMD_DEV
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.17 KB 6.17 KB 2.35 KB 2.35 KB NODE_PROD
react-interactions-events/press.production.min.js 0.0% 🔺+0.2% 2.42 KB 2.42 KB 1004 B 1006 B UMD_PROD
react-interactions-events/scroll.development.js 0.0% +0.1% 6.12 KB 6.12 KB 1.61 KB 1.62 KB NODE_DEV
react-interactions-events/input.development.js 0.0% +0.1% 4.53 KB 4.53 KB 1.45 KB 1.45 KB UMD_DEV
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.1% 2.45 KB 2.45 KB 1.1 KB 1.1 KB NODE_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.1% 1.84 KB 1.84 KB 991 B 992 B UMD_PROD
react-interactions-events/press.development.js 0.0% 0.0% 7.92 KB 7.92 KB 2.54 KB 2.54 KB NODE_DEV
react-interactions-events/focus.development.js 0.0% 0.0% 15.69 KB 15.69 KB 3.27 KB 3.27 KB UMD_DEV
react-interactions-events/press.production.min.js 0.0% 🔺+0.4% 2.13 KB 2.13 KB 915 B 919 B NODE_PROD
react-interactions-events/input.development.js 0.0% +0.1% 4.34 KB 4.34 KB 1.4 KB 1.4 KB NODE_DEV
react-interactions-events/context-menu.development.js 0.0% +0.2% 2.68 KB 2.68 KB 1011 B 1013 B UMD_DEV
react-interactions-events/input.production.min.js 0.0% 🔺+0.2% 1.67 KB 1.67 KB 924 B 926 B NODE_PROD

Size changes (stable)

Generated by 🚫 dangerJS against 5f3d462

@sizebot
Copy link

sizebot commented Jan 3, 2020

Details of bundled changes.

Comparing: cca994c...5f3d462

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/hover.development.js +12.7% +6.5% 7.02 KB 7.92 KB 1.57 KB 1.67 KB UMD_DEV
react-interactions-events/press-legacy.development.js 0.0% 0.0% 23.91 KB 23.91 KB 6.13 KB 6.13 KB UMD_DEV
react-interactions-events/hover.production.min.js 🔺+10.8% 🔺+7.2% 3.14 KB 3.48 KB 1.15 KB 1.23 KB UMD_PROD
react-interactions-events/press-legacy.production.min.js 0.0% 🔺+0.1% 7.26 KB 7.26 KB 2.73 KB 2.73 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% +0.1% 5.24 KB 5.24 KB 1.55 KB 1.55 KB UMD_DEV
ReactEventsHover-prod.js 🔺+10.8% 🔺+5.5% 5.95 KB 6.6 KB 1.38 KB 1.46 KB FB_WWW_PROD
react-interactions-events/keyboard.development.js 0.0% 0.0% 6.1 KB 6.1 KB 2.3 KB 2.3 KB UMD_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 6.02 KB 6.02 KB 1.64 KB 1.64 KB UMD_DEV
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.45 KB 2.45 KB 1.25 KB 1.25 KB UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.1% 2.46 KB 2.46 KB 1.12 KB 1.12 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% 0.0% 7 KB 7 KB 2.22 KB 2.22 KB NODE_DEV
react-interactions-events/keyboard.development.js 0.0% 0.0% 5.92 KB 5.92 KB 2.25 KB 2.26 KB NODE_DEV
react-interactions-events/swipe.development.js 0.0% +0.1% 5.84 KB 5.84 KB 1.59 KB 1.6 KB NODE_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.1% 2.9 KB 2.9 KB 1.39 KB 1.39 KB NODE_PROD
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.27 KB 2.27 KB 1.19 KB 1.19 KB NODE_PROD
react-interactions-events/swipe.production.min.js 0.0% 🔺+0.2% 2.28 KB 2.28 KB 1.06 KB 1.06 KB NODE_PROD
react-interactions-events/context-menu.development.js 0.0% +0.2% 2.69 KB 2.69 KB 1018 B 1020 B UMD_DEV
react-interactions-events/input.development.js 0.0% +0.1% 4.54 KB 4.54 KB 1.46 KB 1.46 KB UMD_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.32 KB 6.32 KB 1.67 KB 1.67 KB UMD_DEV
react-interactions-events/input.production.min.js 0.0% 🔺+0.1% 1.86 KB 1.86 KB 999 B 1000 B UMD_PROD
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.2% 2.64 KB 2.64 KB 1.16 KB 1.16 KB UMD_PROD
react-interactions-events/context-menu.development.js 0.0% +0.1% 2.51 KB 2.51 KB 973 B 974 B NODE_DEV
react-interactions-events/input.development.js 0.0% +0.1% 4.36 KB 4.36 KB 1.41 KB 1.41 KB NODE_DEV
react-interactions-events/scroll.development.js 0.0% +0.1% 6.14 KB 6.14 KB 1.62 KB 1.62 KB NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% 🔺+0.1% 1.22 KB 1.22 KB 684 B 685 B NODE_PROD
react-interactions-events/input.production.min.js 0.0% 🔺+0.2% 1.68 KB 1.68 KB 933 B 935 B NODE_PROD
react-interactions-events/scroll.production.min.js 0.0% 🔺+0.1% 2.46 KB 2.46 KB 1.11 KB 1.11 KB NODE_PROD
react-interactions-events/hover.development.js +13.1% +6.7% 6.84 KB 7.73 KB 1.52 KB 1.62 KB NODE_DEV
react-interactions-events/hover.production.min.js 🔺+11.4% 🔺+7.5% 2.96 KB 3.3 KB 1.09 KB 1.17 KB NODE_PROD
react-interactions-events/press-legacy.production.min.js 0.0% 🔺+0.1% 7.08 KB 7.08 KB 2.67 KB 2.68 KB NODE_PROD
react-interactions-events/focus.development.js 0.0% 0.0% 15.7 KB 15.7 KB 3.28 KB 3.28 KB UMD_DEV
react-interactions-events/press.development.js 0.0% 0.0% 8.22 KB 8.22 KB 2.63 KB 2.63 KB UMD_DEV
react-interactions-events/tap.development.js 0.0% 0.0% 18.26 KB 18.26 KB 3.94 KB 3.94 KB UMD_DEV
react-interactions-events/focus.production.min.js 0.0% 🔺+0.1% 5.34 KB 5.34 KB 1.77 KB 1.77 KB UMD_PROD
react-interactions-events/press.production.min.js 0.0% 🔺+0.2% 2.43 KB 2.43 KB 1013 B 1015 B UMD_PROD
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.35 KB 6.35 KB 2.39 KB 2.4 KB UMD_PROD
react-interactions-events/focus.development.js 0.0% +0.1% 15.52 KB 15.52 KB 3.23 KB 3.23 KB NODE_DEV
react-interactions-events/press.development.js 0.0% +0.1% 7.93 KB 7.93 KB 2.55 KB 2.55 KB NODE_DEV
react-interactions-events/tap.development.js 0.0% 0.0% 18.08 KB 18.08 KB 3.89 KB 3.89 KB NODE_DEV
react-interactions-events/focus.production.min.js 0.0% 🔺+0.1% 5.17 KB 5.17 KB 1.71 KB 1.71 KB NODE_PROD
ReactEventsHover-dev.js +13.0% +7.0% 6.75 KB 7.63 KB 1.52 KB 1.63 KB FB_WWW_DEV
react-interactions-events/press.production.min.js 0.0% 🔺+0.3% 2.14 KB 2.14 KB 924 B 927 B NODE_PROD
react-interactions-events/tap.production.min.js 0.0% 0.0% 6.18 KB 6.18 KB 2.36 KB 2.36 KB NODE_PROD

Size changes (experimental)

Generated by 🚫 dangerJS against 5f3d462

@trueadm trueadm merged commit 5e21157 into facebook:master Jan 7, 2020
@trueadm trueadm deleted the hover-portal-fix branch January 7, 2020 19:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants