Differentiate Chrome-crafted scroll events from user-initiated events (#24)

* Move to React hooks and add resize buttons

* Use useEffect instead of useMemo

* Fix add paragraph

* Fix losing stickiness with Chrome-crafted scroll events

Author: compulim

CHANGELOG.md

@@ -6,7 +6,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 ### Changed
-- `*`: Bump `[email protected]`, `[email protected]`, and `[email protected]`, in PR [#22](https://github.com/compulim/react-scroll-to-bottom/pull/22)
+- `*`: bumped to `[email protected]`, `[email protected]`, and `[email protected]`, in PR [#22](https://github.com/compulim/react-scroll-to-bottom/pull/22)
+### Fixed
+- `Composer`: fix [#22](https://github.com/compulim/react-scroll-to-bottom/issue/22), synthetic `scroll` events crafted by Chrome should not cause stickiness to lose, in PR [#23](https://github.com/compulim/react-scroll-to-bottom/issue/23)
 
 ## [1.3.1] - 2019-02-13
 ### Changed

packages/component/src/ScrollToBottom/Composer.js

@@ -60,6 +60,8 @@ export default class Composer extends React.Component {
         scrollToTop: () => this.state.functionContext.scrollTo(0)
       },
       internalContext: {
+        offsetHeight: 0,
+        scrollHeight: 0,
         setTarget: target => this.setState(() => ({ target }))
       },
       scrollTop: props.mode === 'top' ? 0 : '100%',
@@ -151,29 +153,51 @@ export default class Composer extends React.Component {
       const { target } = state;
 
       if (target) {
-        const { scrollTop, stateContext } = state;
+        const { internalContext, scrollTop, stateContext } = state;
         const { atBottom, atEnd, atStart, atTop } = computeViewState(state);
+        let nextInternalContext = internalContext;
         let nextStateContext = stateContext;
 
         nextStateContext = updateIn(nextStateContext, ['atBottom'], () => atBottom);
         nextStateContext = updateIn(nextStateContext, ['atEnd'], () => atEnd);
         nextStateContext = updateIn(nextStateContext, ['atStart'], () => atStart);
         nextStateContext = updateIn(nextStateContext, ['atTop'], () => atTop);
 
+        // Chrome will emit "synthetic" scroll event if the container is resized or an element is added
+        // We need to ignore these "synthetic" events
+        // Repro: In playground, press 4-1-5-1-1 (small, add one, normal, add one, add one)
+        //        Nomatter how fast or slow the sequence is being presssed, it should still stick to the bottom
+        const { offsetHeight, scrollHeight } = target;
+        const resized = offsetHeight !== internalContext.offsetHeight;
+        const elementChanged = scrollHeight !== internalContext.scrollHeight;
+
+        if (resized) {
+          nextInternalContext = updateIn(nextInternalContext, ['offsetHeight'], () => offsetHeight);
+        }
+
+        if (elementChanged) {
+          nextInternalContext = updateIn(nextInternalContext, ['scrollHeight'], () => scrollHeight);
+        }
+
         // Sticky means:
         // - If it is scrolled programatically, we are still in sticky mode
         // - If it is scrolled by the user, then sticky means if we are at the end
-        nextStateContext = updateIn(nextStateContext, ['sticky'], () => stateContext.animating ? true : atEnd);
+
+        // Only update stickiness if the scroll event is not due to synthetic scroll done by Chrome
+        if (!resized && !elementChanged) {
+          nextStateContext = updateIn(nextStateContext, ['sticky'], () => stateContext.animating ? true : atEnd);
+        }
 
         // If no scrollTop is set (not in programmatic scrolling mode), we should set "animating" to false
         // "animating" is used to calculate the "sticky" property
         if (scrollTop === null) {
           nextStateContext = updateIn(nextStateContext, ['animating'], () => false);
         }
 
-        if (stateContext !== nextStateContext) {
-          return { stateContext: nextStateContext };
-        }
+        return {
+          ...internalContext === nextInternalContext ? {} : { internalContext: nextInternalContext },
+          ...stateContext === nextStateContext ? {} : { stateContext: nextStateContext }
+        };
       }
     }, () => {
       this.state.stateContext.sticky && this.enableWorker();

packages/component/src/ScrollToBottom/FunctionContext.js

@@ -4,6 +4,7 @@ const context = React.createContext({
   scrollTo: () => 0,
   scrollToBottom: () => 0,
   scrollToEnd: () => 0,
+  scrollToStart: () => 0,
   scrollToTop: () => 0
 });
 

packages/component/src/ScrollToBottom/InternalContext.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
 const context = React.createContext({
-  _handleUpdate: () => 0,
-  _setTarget: () => 0
+  offsetHeight: 0,
+  scrollHeight: 0,
+  setTarget: () => 0
 });
 
 context.displayName = 'ScrollToBottomInternalContext';

packages/component/src/ScrollToBottom/StateContext.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
 const context = React.createContext({
+  animating: false,
   atBottom: true,
   atEnd: true,
   atTop: true,
-  mode: 'bottom'
+  mode: 'bottom',
+  sticky: true
 });
 
 context.displayName = 'ScrollToBottomStateContext';