fix: scroll error

Expensify · Sep 4, 2024 · 41e6968 · 41e6968
1 parent 7343191
commit 41e6968
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 21 deletions.
diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx
@@ -3,8 +3,6 @@ import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import getPlatform from '@libs/getPlatform';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -27,17 +25,13 @@ type CategoryPickerProps = CategoryPickerOnyxProps & {
     selectedCategory?: string;
     onSubmit: (item: ListItem) => void;
 
-    /** Whether SectionList should have overflow: "auto" enabled */
-    shouldAddOverflow?: boolean;
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView?: boolean;
 };
 
-function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit, shouldAddOverflow = false}: CategoryPickerProps) {
-    const styles = useThemeStyles();
-    const isWeb = getPlatform() === CONST.PLATFORM.WEB;
+function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit, shouldUseCustomScrollView = false}: CategoryPickerProps) {
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
-    // Ensure scrolling works for the SectionList in a nested lists structure involving a Modal on the web.
-    const sectionListStyles = isWeb && shouldAddOverflow && [styles.overflowAuto, styles.flex1];
 
     const selectedOptions = useMemo(() => {
         if (!selectedCategory) {
@@ -93,7 +87,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey ?? undefined}
             isRowMultilineSupported
-            sectionListStyle={sectionListStyles}
+            shouldUseCustomScrollView={shouldUseCustomScrollView}
         />
     );
 }

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -2,14 +2,15 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListData, SectionListRenderItemInfo} from 'react-native';
+import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, ScrollViewProps, SectionListData, SectionListRenderItemInfo} from 'react-native';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Checkbox from '@components/Checkbox';
 import FixedFooter from '@components/FixedFooter';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import {PressableWithFeedback} from '@components/Pressable';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
 import SectionList from '@components/SectionList';
 import ShowMoreButton from '@components/ShowMoreButton';
 import Text from '@components/Text';
@@ -73,6 +74,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldStopPropagation = false,
         shouldShowTooltips = true,
         shouldUseDynamicMaxToRenderPerBatch = false,
+        shouldUseCustomScrollView = false,
         rightHandSideComponent,
         isLoadingNewOptions = false,
         onLayout,
@@ -423,6 +425,9 @@ function BaseSelectionList<TItem extends ListItem>(
         </>
     );
 
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    const scrollComponent = shouldUseCustomScrollView ? (props: ScrollViewProps) => <ScrollView {...props} /> : undefined;
+
     const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, SectionWithIndexOffset<TItem>>) => {
         const normalizedIndex = index + (section?.indexOffset ?? 0);
         const isDisabled = !!section.isDisabled || item.isDisabled;
@@ -701,6 +706,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             {!listHeaderContent && header()}
                             <SectionList
                                 removeClippedSubviews={removeClippedSubviews}
+                                renderScrollComponent={scrollComponent}
                                 ref={listRef}
                                 sections={slicedSections}
                                 stickySectionHeadersEnabled={false}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -425,6 +425,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
     shouldUseDynamicMaxToRenderPerBatch?: boolean;
 
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView?: boolean;
+
     /** Whether keyboard shortcuts should be disabled */
     disableKeyboardShortcuts?: boolean;
 

diff --git a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx
@@ -46,7 +46,7 @@ function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRo
                 isPickerVisible={isCategoryPickerVisible}
                 showPickerModal={() => setIsCategoryPickerVisible(true)}
                 hidePickerModal={() => setIsCategoryPickerVisible(false)}
-                shouldAddOverflow
+                shouldUseCustomScrollView
             />
         </BaseListItem>
     );

diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx
@@ -4,7 +4,6 @@ import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import SpendCategorySelectorListItem from '@components/SelectionList/SpendCategorySelectorListItem';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -19,6 +18,7 @@ import {setWorkspaceRequiresCategory} from '@userActions/Policy/Category';
 import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SpendCategorySelectorListItem from './SpendCategorySelectorListItem';
 
 type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps;
 

diff --git a/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx b/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx
@@ -26,11 +26,11 @@ type CategorySelectorModalProps = {
     /** Label to display on field */
     label: string;
 
-    /** Whether SectionList should have overflow: "auto" enabled */
-    shouldAddOverflow: boolean;
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView: boolean;
 };
 
-function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label, shouldAddOverflow}: CategorySelectorModalProps) {
+function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label, shouldUseCustomScrollView}: CategorySelectorModalProps) {
     const styles = useThemeStyles();
 
     return (
@@ -57,7 +57,7 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
                     policyID={policyID}
                     selectedCategory={currentCategory}
                     onSubmit={onCategorySelected}
-                    shouldAddOverflow={shouldAddOverflow}
+                    shouldUseCustomScrollView={shouldUseCustomScrollView}
                 />
             </ScreenWrapper>
         </Modal>

diff --git a/src/pages/workspace/distanceRates/CategorySelector/index.tsx b/src/pages/workspace/distanceRates/CategorySelector/index.tsx
@@ -34,8 +34,8 @@ type CategorySelectorProps = {
     /** Callback to hide category picker */
     hidePickerModal: () => void;
 
-    /** Whether SectionList should have overflow: "auto" enabled */
-    shouldAddOverflow?: boolean;
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView?: boolean;
 };
 
 function CategorySelector({
@@ -48,7 +48,7 @@ function CategorySelector({
     isPickerVisible,
     showPickerModal,
     hidePickerModal,
-    shouldAddOverflow = false,
+    shouldUseCustomScrollView = false,
 }: CategorySelectorProps) {
     const styles = useThemeStyles();
 
@@ -78,7 +78,7 @@ function CategorySelector({
                 onClose={hidePickerModal}
                 onCategorySelected={updateCategoryInput}
                 label={label}
-                shouldAddOverflow={shouldAddOverflow}
+                shouldUseCustomScrollView={shouldUseCustomScrollView}
             />
         </View>
     );