fix scrolling issues

JedWatson · Jun 18, 2019 · 8cc8868 · 8cc8868
1 parent c22a4b2
commit 8cc8868
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/packages/react-select/src/internal/ScrollCaptor.js b/packages/react-select/src/internal/ScrollCaptor.js
@@ -15,12 +15,23 @@ export type CaptorProps = {
 class ScrollCaptor extends Component<CaptorProps> {
   isBottom: boolean = false;
   isTop: boolean = false;
+  isListened: boolean = false;
   scrollTarget: HTMLElement;
   touchStart: number;
+  mouseStart: number;
 
   componentDidMount() {
     this.startListening(this.scrollTarget);
   }
+  componentDidUpdate() {
+    if (!this.scrollTarget) return;
+
+    if (!this.isListened && (this.scrollTarget.scrollHeight > this.scrollTarget.clientHeight)) {
+      this.startListening(this.scrollTarget);
+    } else if (this.isListened && (this.scrollTarget.scrollHeight <= this.scrollTarget.clientHeight)) {
+      this.stopListening(this.scrollTarget);
+    }
+  };
   componentWillUnmount() {
     this.stopListening(this.scrollTarget);
   }
@@ -33,12 +44,20 @@ class ScrollCaptor extends Component<CaptorProps> {
     if (typeof el.addEventListener === 'function') {
       el.addEventListener('wheel', this.onWheel, false);
     }
+    if (typeof el.addEventListener === 'function') {
+      el.addEventListener('mousedown', this.onMouseDown, false);
+    }
+    if (typeof el.addEventListener === 'function') {
+      el.addEventListener('mouseup', this.onMouseUp, false);
+    }
     if (typeof el.addEventListener === 'function') {
       el.addEventListener('touchstart', this.onTouchStart, false);
     }
     if (typeof el.addEventListener === 'function') {
       el.addEventListener('touchmove', this.onTouchMove, false);
     }
+
+    this.isListened = true;
   }
   stopListening(el: HTMLElement) {
     // bail early if no scroll available
@@ -48,12 +67,20 @@ class ScrollCaptor extends Component<CaptorProps> {
     if (typeof el.removeEventListener === 'function') {
       el.removeEventListener('wheel', this.onWheel, false);
     }
+    if (typeof el.removeEventListener === 'function') {
+      el.removeEventListener('mousedown', this.onMouseDown, false);
+    }
+    if (typeof el.removeEventListener === 'function') {
+      el.removeEventListener('mouseup', this.onMouseUp, false);
+    }
     if (typeof el.removeEventListener === 'function') {
       el.removeEventListener('touchstart', this.onTouchStart, false);
     }
     if (typeof el.removeEventListener === 'function') {
       el.removeEventListener('touchmove', this.onTouchMove, false);
     }
+
+    this.isListened = false;
   }
 
   cancelScroll = (event: SyntheticEvent<HTMLElement>) => {
@@ -111,6 +138,14 @@ class ScrollCaptor extends Component<CaptorProps> {
   onWheel = (event: SyntheticWheelEvent<HTMLElement>) => {
     this.handleEventDelta(event, event.deltaY);
   };
+  onMouseDown = (event: SyntheticMouseEvent<HTMLElement>) => {
+    // set mouse start so we can calculate mousemove delta
+    this.mouseStart = event.clientY;
+  };
+  onMouseUp = (event: SyntheticMouseEvent<HTMLElement>) => {
+    const deltaY = event.clientY - this.mouseStart;
+    this.handleEventDelta(event, deltaY);
+  };
   onTouchStart = (event: SyntheticTouchEvent<HTMLElement>) => {
     // set touch start so we can calculate touchmove delta
     this.touchStart = event.changedTouches[0].clientY;