{"body":"","parents":["781212aab344b1619806369d768fad0c1ac3e04a"],"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMEventListener-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMEventListener-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventListener-test.js\nindex 1e6169cb55..a6918c6919 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMEventListener-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventListener-test.js\n@@ -12,11 +12,13 @@\n describe('ReactDOMEventListener', () => {\n let React;\n let ReactDOM;\n+ let ReactDOMServer;\n \n beforeEach(() => {\n jest.resetModules();\n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMServer = require('react-dom\/server');\n });\n \n describe('Propagation', () => {\n@@ -797,4 +799,108 @@ describe('ReactDOMEventListener', () => {\n document.body.removeChild(container);\n }\n });\n+\n+ it('should subscribe to scroll during updates', () => {\n+ const container = document.createElement('div');\n+ const ref = React.createRef();\n+ const log = [];\n+ const onScroll = jest.fn(e =>\n+ log.push(['bubble', e.currentTarget.className]),\n+ );\n+ const onScrollCapture = jest.fn(e =>\n+ log.push(['capture', e.currentTarget.className]),\n+ );\n+ document.body.appendChild(container);\n+ try {\n+ ReactDOM.render(\n+

\n+

\n+ <\/div>\n+ <\/div>,\n+ container,\n+ );\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/div>\n+ <\/div>,\n+ container,\n+ );\n+ ref.current.dispatchEvent(\n+ new Event('scroll', {\n+ bubbles: false,\n+ }),\n+ );\n+ expect(log).toEqual([\n+ ['capture', 'grand'],\n+ ['capture', 'parent'],\n+ ['capture', 'child'],\n+ ['bubble', 'child'],\n+ ]);\n+ } finally {\n+ document.body.removeChild(container);\n+ }\n+ });\n+\n+ \/\/ Regression test.\n+ it('should subscribe to scroll during hydration', () => {\n+ const container = document.createElement('div');\n+ const ref = React.createRef();\n+ const log = [];\n+ const onScroll = jest.fn(e =>\n+ log.push(['bubble', e.currentTarget.className]),\n+ );\n+ const onScrollCapture = jest.fn(e =>\n+ log.push(['capture', e.currentTarget.className]),\n+ );\n+ const tree = (\n+ \n+ \n+ \n+ <\/div>\n+ <\/div>\n+ );\n+ document.body.appendChild(container);\n+ try {\n+ container.innerHTML = ReactDOMServer.renderToString(tree);\n+ ReactDOM.hydrate(tree, container);\n+ ref.current.dispatchEvent(\n+ new Event('scroll', {\n+ bubbles: false,\n+ }),\n+ );\n+ expect(log).toEqual([\n+ ['capture', 'grand'],\n+ ['capture', 'parent'],\n+ ['capture', 'child'],\n+ ['bubble', 'child'],\n+ ]);\n+ } finally {\n+ document.body.removeChild(container);\n+ }\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex 48b979af64..a228b15647 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -1086,6 +1086,8 @@ export function diffHydratedProperties(\n }\n if (!enableEagerRootListeners) {\n ensureListeningTo(rootContainerElement, propKey, domElement);\n+ } else if (propKey === 'onScroll') {\n+ listenToNonDelegatedEvent('scroll', domElement);\n }\n }\n } else if (\n","commit":{"revision":"a08ae9f147a716520a089055e2dec8f5397a4b0f","subject":"Listen to onScroll during hydration (#19803)","shortRevision":"a08ae9f147","authorEmail":"dan.abramov@gmail.com","authorName":"Dan Abramov","authoredAt":"2020-09-10T11:00:02+01:00"}}

dillon1000/react

Files changed