From d24cf33d3664025eb91f2beb4598c1147dc6a80b Mon Sep 17 00:00:00 2001 From: Robert Hernandez Date: Sat, 8 Feb 2025 02:55:01 -0800 Subject: [PATCH 1/2] fix --- packages/react-select/src/internal/useScrollLock.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-select/src/internal/useScrollLock.ts b/packages/react-select/src/internal/useScrollLock.ts index 150a0a6f99..c38090a01c 100644 --- a/packages/react-select/src/internal/useScrollLock.ts +++ b/packages/react-select/src/internal/useScrollLock.ts @@ -4,15 +4,14 @@ const STYLE_KEYS = [ 'boxSizing', 'height', 'overflow', - 'paddingRight', 'position', ] as const; const LOCK_STYLES = { boxSizing: 'border-box', // account for possible declaration `width: 100%;` on body + height: '100%', overflow: 'hidden', position: 'relative', - height: '100%', }; function preventTouchMove(e: TouchEvent) { @@ -83,8 +82,7 @@ export default function useScrollLock({ // apply the lock styles and padding if this is the first scroll lock if (accountForScrollbars && activeScrollLocks < 1) { - const currentPadding = - parseInt(originalStyles.current.paddingRight, 10) || 0; + const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight.slice(0,-2)); const clientWidth = document.body ? document.body.clientWidth : 0; const adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0; From 8c80a233ca7bb9b6eceffbc7f8695413305e7356 Mon Sep 17 00:00:00 2001 From: Robert Hernandez Date: Sat, 8 Feb 2025 03:40:50 -0800 Subject: [PATCH 2/2] prettified --- packages/react-select/src/internal/useScrollLock.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/react-select/src/internal/useScrollLock.ts b/packages/react-select/src/internal/useScrollLock.ts index c38090a01c..3ee6d08c47 100644 --- a/packages/react-select/src/internal/useScrollLock.ts +++ b/packages/react-select/src/internal/useScrollLock.ts @@ -1,11 +1,6 @@ import { useCallback, useEffect, useRef } from 'react'; -const STYLE_KEYS = [ - 'boxSizing', - 'height', - 'overflow', - 'position', -] as const; +const STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'position'] as const; const LOCK_STYLES = { boxSizing: 'border-box', // account for possible declaration `width: 100%;` on body @@ -82,7 +77,9 @@ export default function useScrollLock({ // apply the lock styles and padding if this is the first scroll lock if (accountForScrollbars && activeScrollLocks < 1) { - const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight.slice(0,-2)); + const currentPadding = parseInt( + window.getComputedStyle(document.body).paddingRight.slice(0, -2) + ); const clientWidth = document.body ? document.body.clientWidth : 0; const adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;