From 8cc88682e270594bb6630432dcc1f60729db25bf Mon Sep 17 00:00:00 2001 From: Vadim Goy Date: Tue, 18 Jun 2019 11:48:52 +0300 Subject: [PATCH] fix scrolling issues --- .../react-select/src/internal/ScrollCaptor.js | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/react-select/src/internal/ScrollCaptor.js b/packages/react-select/src/internal/ScrollCaptor.js index 0a913e7d55..dc35c7abdc 100644 --- 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 { 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 { 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 { 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) => { @@ -111,6 +138,14 @@ class ScrollCaptor extends Component { onWheel = (event: SyntheticWheelEvent) => { this.handleEventDelta(event, event.deltaY); }; + onMouseDown = (event: SyntheticMouseEvent) => { + // set mouse start so we can calculate mousemove delta + this.mouseStart = event.clientY; + }; + onMouseUp = (event: SyntheticMouseEvent) => { + const deltaY = event.clientY - this.mouseStart; + this.handleEventDelta(event, deltaY); + }; onTouchStart = (event: SyntheticTouchEvent) => { // set touch start so we can calculate touchmove delta this.touchStart = event.changedTouches[0].clientY;