From 2bc6fef8a72eccfa196f994b12c7048dff2dd460 Mon Sep 17 00:00:00 2001
From: "chinmay.chaudhary" <chinmay.chaudhary@sprinklr.com>
Date: Mon, 9 Sep 2019 20:58:34 +0530
Subject: [PATCH] fix: masonry scroll handler should rely on
 event.currentTarget instead of event.target

---
 source/Masonry/Masonry.jest.js | 34 +++++++++++++++++++++++++++++++++-
 source/Masonry/Masonry.js      |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/source/Masonry/Masonry.jest.js b/source/Masonry/Masonry.jest.js
index f7f189185..23a00189b 100644
--- a/source/Masonry/Masonry.jest.js
+++ b/source/Masonry/Masonry.jest.js
@@ -97,7 +97,10 @@ function getMarkup(props = {}) {
 function simulateScroll(masonry, scrollTop = 0) {
   const target = {scrollTop};
   masonry._scrollingContainer = target; // HACK to work around _onScroll target check
-  Simulate.scroll(findDOMNode(masonry), {target});
+
+  const masonryNode = findDOMNode(masonry);
+  masonryNode.scrollTop = scrollTop;
+  Simulate.scroll(masonryNode);
 }
 
 describe('Masonry', () => {
@@ -298,6 +301,35 @@ describe('Masonry', () => {
         expect(node.style.right).toMatch(/px/);
       });
     });
+
+    it('should consider scroll only of the container element and not of any ancestor element', () => {
+      const cellMeasurerCache = createCellMeasurerCache();
+      const renderScrollableCell = index => (
+        <div
+          style={{height: '50px', overflow: 'visible'}}
+          id={`scrollable-cell-${index}`}>
+          <div style={{height: '500px'}}>{index}</div>
+        </div>
+      );
+      const cellRenderer = createCellRenderer(
+        cellMeasurerCache,
+        renderScrollableCell,
+      );
+
+      const rendered = findDOMNode(
+        render(
+          getMarkup({
+            overscanByPixels: 0,
+            cellMeasurerCache,
+            cellRenderer,
+          }),
+        ),
+      );
+      assertVisibleCells(rendered, '0,1,2,3,4,5');
+      const cellEl = rendered.querySelector('#scrollable-cell-1');
+      Simulate.scroll(cellEl, {target: {scrollTop: 100}});
+      assertVisibleCells(rendered, '0,1,2,3,4,5');
+    });
   });
 
   describe('recomputeCellPositions', () => {
diff --git a/source/Masonry/Masonry.js b/source/Masonry/Masonry.js
index aad79dd68..095722162 100644
--- a/source/Masonry/Masonry.js
+++ b/source/Masonry/Masonry.js
@@ -410,7 +410,7 @@ class Masonry extends React.PureComponent<Props, State> {
   _onScroll = event => {
     const {height} = this.props;
 
-    const eventScrollTop = event.target.scrollTop;
+    const eventScrollTop = event.currentTarget.scrollTop;
 
     // When this component is shrunk drastically, React dispatches a series of back-to-back scroll events,
     // Gradually converging on a scrollTop that is within the bounds of the new, smaller height.