From 53d41531f5d936d0ca2d78fc165a6687911ae027 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Tue, 28 Dec 2021 18:04:57 +0100 Subject: [PATCH 1/6] Fixed scroll bug. Fixed a bug where `onMenuScrollToBottom` isn't called when the scrolling is performed by dragging the scrollbar to the bottom using a mouse-drag. --- .../react-select/src/internal/useScrollCapture.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index 6452d6564e..386bf2b4e1 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -25,6 +25,7 @@ export default function useScrollCapture({ const isTop = useRef(false); const touchStart = useRef(0); const scrollTarget = useRef(null); + const previousScrollTop = useRef(0); const handleEventDelta = useCallback( (event: WheelEvent | TouchEvent, delta: number) => { @@ -73,9 +74,11 @@ export default function useScrollCapture({ [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave] ); - const onWheel = useCallback( - (event: WheelEvent) => { - handleEventDelta(event, event.deltaY); + const onScroll = useCallback( + (event: ScrollEvent) => { + const deltaY = event.currentTarget.scrollTop - previousScrollTop.current; + previousScrollTop.current = event.currentTarget.scrollTop; + handleEventDelta(event, deltaY); }, [handleEventDelta] ); @@ -97,7 +100,7 @@ export default function useScrollCapture({ if (!el) return; const notPassive = supportsPassiveEvents ? { passive: false } : false; - el.addEventListener('wheel', onWheel, notPassive); + el.addEventListener('scroll', onScroll, notPassive); el.addEventListener('touchstart', onTouchStart, notPassive); el.addEventListener('touchmove', onTouchMove, notPassive); }, @@ -109,7 +112,7 @@ export default function useScrollCapture({ // bail early if no element is available to detach from if (!el) return; - el.removeEventListener('wheel', onWheel, false); + el.removeEventListener('scroll', onScroll, false); el.removeEventListener('touchstart', onTouchStart, false); el.removeEventListener('touchmove', onTouchMove, false); }, From 2df3d9e9556fd668bf493be6c96d95caf5848346 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Wed, 29 Dec 2021 11:08:00 +0100 Subject: [PATCH 2/6] Replace onWheel with onScroll --- packages/react-select/src/internal/useScrollCapture.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index 386bf2b4e1..f29abd75c0 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -104,7 +104,7 @@ export default function useScrollCapture({ el.addEventListener('touchstart', onTouchStart, notPassive); el.addEventListener('touchmove', onTouchMove, notPassive); }, - [onTouchMove, onTouchStart, onWheel] + [onTouchMove, onTouchStart, onScroll] ); const stopListening = useCallback( @@ -116,7 +116,7 @@ export default function useScrollCapture({ el.removeEventListener('touchstart', onTouchStart, false); el.removeEventListener('touchmove', onTouchMove, false); }, - [onTouchMove, onTouchStart, onWheel] + [onTouchMove, onTouchStart, onScroll] ); useEffect(() => { From 5faa082bc8f09602aae5f51b9aa7eafd4f1aa386 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Wed, 29 Dec 2021 11:11:50 +0100 Subject: [PATCH 3/6] Use WheelEvent --- packages/react-select/src/internal/useScrollCapture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index f29abd75c0..4944d41088 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -75,7 +75,7 @@ export default function useScrollCapture({ ); const onScroll = useCallback( - (event: ScrollEvent) => { + (event: WheelEvent) => { const deltaY = event.currentTarget.scrollTop - previousScrollTop.current; previousScrollTop.current = event.currentTarget.scrollTop; handleEventDelta(event, deltaY); From 5613229a7703f0a14ae872996a545d4fb02cb632 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Thu, 30 Dec 2021 10:10:03 +0100 Subject: [PATCH 4/6] Fixed type --- packages/react-select/src/internal/useScrollCapture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index 4944d41088..569adc5093 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -75,7 +75,7 @@ export default function useScrollCapture({ ); const onScroll = useCallback( - (event: WheelEvent) => { + (event: UIEvent) => { const deltaY = event.currentTarget.scrollTop - previousScrollTop.current; previousScrollTop.current = event.currentTarget.scrollTop; handleEventDelta(event, deltaY); From b5ccfc1c4cc97fb8ee49b72d4c992bead8c12b77 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Thu, 30 Dec 2021 15:13:39 +0100 Subject: [PATCH 5/6] Fixed type. --- packages/react-select/src/internal/useScrollCapture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index 569adc5093..c664a1d9f0 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -75,7 +75,7 @@ export default function useScrollCapture({ ); const onScroll = useCallback( - (event: UIEvent) => { + (event: React.UIEvent) => { const deltaY = event.currentTarget.scrollTop - previousScrollTop.current; previousScrollTop.current = event.currentTarget.scrollTop; handleEventDelta(event, deltaY); From 2ce26312f9b93fd4f16d779c357bb9953faed876 Mon Sep 17 00:00:00 2001 From: Duarte10 <45232013+Duarte10@users.noreply.github.com> Date: Thu, 30 Dec 2021 15:26:41 +0100 Subject: [PATCH 6/6] Fixed type. --- packages/react-select/src/internal/useScrollCapture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts index c664a1d9f0..a454b6530f 100644 --- a/packages/react-select/src/internal/useScrollCapture.ts +++ b/packages/react-select/src/internal/useScrollCapture.ts @@ -28,7 +28,7 @@ export default function useScrollCapture({ const previousScrollTop = useRef(0); const handleEventDelta = useCallback( - (event: WheelEvent | TouchEvent, delta: number) => { + (event: WheelEvent | TouchEvent | React.UIEvent, delta: number) => { if (scrollTarget.current === null) return; const { scrollTop, scrollHeight, clientHeight } = scrollTarget.current;