Limit tag list to 500 items

src/CONST.ts

@@ -2902,6 +2902,12 @@ const CONST = {
 
     BACK_BUTTON_NATIVE_ID: 'backButton',
 
+    /**
+     * The maximum count of items per page for OptionsSelector.
+     * When paginate, it multiplies by page number.
+     */
+    MAX_OPTIONS_SELECTOR_PAGE_LENGTH: 500,
+
     /**
      * Performance test setup - run the same test multiple times to get a more accurate result
      */

src/components/MoneyRequestConfirmationList.js

@@ -28,17 +28,16 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import Button from './Button';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import FormHelpMessage from './FormHelpMessage';
-import * as Expensicons from './Icon/Expensicons';
 import Image from './Image';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import optionPropTypes from './optionPropTypes';
 import OptionsSelector from './OptionsSelector';
 import SettlementButton from './SettlementButton';
+import ShowMoreButton from './ShowMoreButton';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
 import Text from './Text';
@@ -636,20 +635,10 @@ function MoneyRequestConfirmationList(props) {
                 numberOfLinesTitle={2}
             />
             {!shouldShowAllFields && (
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
-                    <Button
-                        small
-                        onPress={toggleShouldExpandFields}
-                        text={translate('common.showMore')}
-                        shouldShowRightIcon
-                        iconRight={Expensicons.DownArrow}
-                        iconFill={theme.icon}
-                        style={styles.mh0}
-                    />
-
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
-                </View>
+                <ShowMoreButton
+                    containerStyle={styles.mt1}
+                    onPress={toggleShouldExpandFields}
+                />
             )}
             {shouldShowAllFields && (
                 <>

src/components/OptionsList/BaseOptionsList.js

@@ -70,6 +70,7 @@ function BaseOptionsList({
     isLoadingNewOptions,
     nestedScrollEnabled,
     bounces,
+    renderFooterContent,
 }) {
     const styles = useThemeStyles();
     const flattenedData = useRef();
@@ -286,6 +287,7 @@ function BaseOptionsList({
                         viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                         onViewableItemsChanged={onViewableItemsChanged}
                         bounces={bounces}
+                        ListFooterComponent={renderFooterContent}
                     />
                 </>
             )}

src/components/OptionsList/optionsListPropTypes.js

@@ -100,6 +100,9 @@ const propTypes = {
 
     /** Whether the list should have a bounce effect on iOS */
     bounces: PropTypes.bool,
+
+    /** Custom content to display in the floating footer */
+    renderFooterContent: PropTypes.func,
 };
 
 const defaultProps = {
@@ -130,6 +133,7 @@ const defaultProps = {
     isLoadingNewOptions: false,
     nestedScrollEnabled: true,
     bounces: true,
+    renderFooterContent: undefined,
 };
 
 export {propTypes, defaultProps};

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -11,6 +11,7 @@ import Icon from '@components/Icon';
 import {Info} from '@components/Icon/Expensicons';
 import OptionsList from '@components/OptionsList';
 import {PressableWithoutFeedback} from '@components/Pressable';
+import ShowMoreButton from '@components/ShowMoreButton';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
@@ -74,17 +75,23 @@ class BaseOptionsSelector extends Component {
         this.selectFocusedOption = this.selectFocusedOption.bind(this);
         this.addToSelection = this.addToSelection.bind(this);
         this.updateSearchValue = this.updateSearchValue.bind(this);
+        this.incrementPage = this.incrementPage.bind(this);
+        this.sliceSections = this.sliceSections.bind(this);
+        this.calculateAllVisibleOptionsCount = this.calculateAllVisibleOptionsCount.bind(this);
         this.relatedTarget = null;
 
         const allOptions = this.flattenSections();
+        const sections = this.sliceSections();
         const focusedIndex = this.getInitiallyFocusedIndex(allOptions);
 
         this.state = {
+            sections,
             allOptions,
             focusedIndex,
             shouldDisableRowSelection: false,
             shouldShowReferralModal: false,
             errorMessage: '',
+            paginationPage: 1,
         };
     }
 
@@ -100,7 +107,7 @@ class BaseOptionsSelector extends Component {
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps, prevState) {
         if (prevProps.isFocused !== this.props.isFocused) {
             if (this.props.isFocused) {
                 this.subscribeToKeyboardShortcut();
@@ -118,14 +125,24 @@ class BaseOptionsSelector extends Component {
             }, CONST.ANIMATED_TRANSITION);
         }
 
+        if (prevState.paginationPage !== this.state.paginationPage) {
+            const newSections = this.sliceSections();
+
+            this.setState({
+                sections: newSections,
+            });
+        }
+
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }
 
+        const newSections = this.sliceSections();
         const newOptions = this.flattenSections();
 
         if (prevProps.preferredLocale !== this.props.preferredLocale) {
             this.setState({
+                sections: newSections,
                 allOptions: newOptions,
             });
             return;
@@ -136,6 +153,7 @@ class BaseOptionsSelector extends Component {
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(
             {
+                sections: newSections,
                 allOptions: newOptions,
                 focusedIndex: _.isNumber(this.props.initialFocusedIndex) ? this.props.initialFocusedIndex : newFocusedIndex,
             },
@@ -189,8 +207,43 @@ class BaseOptionsSelector extends Component {
         return defaultIndex;
     }
 
+    /**
+     * Maps sections to render only allowed count of them per section.
+     *
+     * @returns {Objects[]}
+     */
+    sliceSections() {
+        return _.map(this.props.sections, (section) => {
+            if (_.isEmpty(section.data)) {
+                return section;
+            }
+
+            return {
+                ...section,
+                data: section.data.slice(0, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * lodashGet(this.state, 'paginationPage', 1)),
+            };
+        });
+    }
+
+    /**
+     * Calculates all currently visible options based on the sections that are currently being shown
+     * and the number of items of those sections.
+     *
+     * @returns {Number}
+     */
+    calculateAllVisibleOptionsCount() {
+        let count = 0;
+
+        _.forEach(this.state.sections, (section) => {
+            count += lodashGet(section, 'data.length', 0);
+        });
+
+        return count;
+    }
+
     updateSearchValue(value) {
         this.setState({
+            paginationPage: 1,
             errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '',
         });
 
@@ -328,12 +381,16 @@ class BaseOptionsSelector extends Component {
         const itemIndex = option.index;
         const sectionIndex = option.sectionIndex;
 
+        if (!lodashGet(this.state.sections, `[${sectionIndex}].data[${itemIndex}]`, null)) {
+            return;
+        }
+
         // Note: react-native's SectionList automatically strips out any empty sections.
         // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
         // Otherwise, it will cause an index-out-of-bounds error and crash the app.
         let adjustedSectionIndex = sectionIndex;
         for (let i = 0; i < sectionIndex; i++) {
-            if (_.isEmpty(lodashGet(this.props.sections, `[${i}].data`))) {
+            if (_.isEmpty(lodashGet(this.state.sections, `[${i}].data`))) {
                 adjustedSectionIndex--;
             }
         }
@@ -387,7 +444,17 @@ class BaseOptionsSelector extends Component {
         this.props.onAddToSelection(option);
     }
 
+    /**
+     * Increments a pagination page to show more items
+     */
+    incrementPage() {
+        this.setState((prev) => ({
+            paginationPage: prev.paginationPage + 1,
+        }));
+    }
+
     render() {
+        const shouldShowShowMoreButton = this.state.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage;
         const shouldShowFooter =
             !this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
@@ -424,7 +491,7 @@ class BaseOptionsSelector extends Component {
                 ref={(el) => (this.list = el)}
                 optionHoveredStyle={this.props.optionHoveredStyle}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
-                sections={this.props.sections}
+                sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
@@ -458,6 +525,16 @@ class BaseOptionsSelector extends Component {
                 shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow}
                 nestedScrollEnabled={this.props.nestedScrollEnabled}
                 bounces={!this.props.shouldTextInputAppearBelowOptions || !this.props.shouldAllowScrollingChildren}
+                renderFooterContent={() =>
+                    shouldShowShowMoreButton && (
+                        <ShowMoreButton
+                            containerStyle={{...styles.mt2, ...styles.mb5}}
+                            currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
+                            totalCount={this.state.allOptions.length}
+                            onPress={this.incrementPage}
+                        />
+                    )
+                }
             />
         );
 
@@ -475,7 +552,7 @@ class BaseOptionsSelector extends Component {
             <ArrowKeyFocusManager
                 disabledIndexes={this.disabledOptionsIndexes}
                 focusedIndex={this.state.focusedIndex}
-                maxIndex={this.state.allOptions.length - 1}
+                maxIndex={this.calculateAllVisibleOptionsCount() - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
                 shouldResetIndexOnEndReached={false}
             >

src/components/ShowMoreButton/index.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Text, View} from 'react-native';
+import _ from 'underscore';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import * as NumberFormatUtils from '@libs/NumberFormatUtils';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+
+const propTypes = {
+    /** Additional styles for container */
+    containerStyle: stylePropTypes,
+
+    /** The number of currently shown items */
+    currentCount: PropTypes.number,
+
+    /** The total number of items that could be shown */
+    totalCount: PropTypes.number,
+
+    /** A handler that fires when button has been pressed */
+    onPress: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+    containerStyle: {},
+    currentCount: undefined,
+    totalCount: undefined,
+};
+
+function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
+    const {translate, preferredLocale} = useLocalize();
+
+    const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
+
+    return (
+        <View style={[styles.alignItemsCenter, containerStyle]}>
+            {shouldShowCounter && (
+                <Text style={[styles.mb2, styles.textLabelSupporting]}>
+                    {`${translate('common.showing')} `}
+                    <Text style={styles.textStrong}>{currentCount}</Text>
+                    {` ${translate('common.of')} `}
+                    <Text style={styles.textStrong}>{NumberFormatUtils.format(preferredLocale, totalCount)}</Text>
+                </Text>
+            )}
+            <View style={[styles.w100, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
+                <Button
+                    style={styles.mh0}
+                    small
+                    shouldShowRightIcon
+                    iconFill={themeColors.icon}
+                    iconRight={Expensicons.DownArrow}
+                    text={translate('common.showMore')}
+                    accessibilityLabel={translate('common.showMore')}
+                    onPress={onPress}
+                />
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
+            </View>
+        </View>
+    );
+}
+
+ShowMoreButton.displayName = 'ShowMoreButton';
+ShowMoreButton.propTypes = propTypes;
+ShowMoreButton.defaultProps = defaultProps;
+
+export default ShowMoreButton;

src/components/TagPicker/index.js

@@ -6,12 +6,13 @@ import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './tagPickerPropTypes';
 
-function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit, shouldShowDisabledAndSelectedOption}) {
+function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption, insets, onSubmit}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
@@ -66,6 +67,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
 
     return (
         <OptionsSelector
+            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
             optionHoveredStyle={styles.hoveredComponentBG}
             sectionHeaderStyle={styles.mt5}
             sections={sections}

src/components/TagPicker/tagPickerPropTypes.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import tagPropTypes from '@components/tagPropTypes';
+import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 
 const propTypes = {
     /** The policyID we are getting tags for */
@@ -14,6 +15,12 @@ const propTypes = {
     /** Callback to submit the selected tag */
     onSubmit: PropTypes.func.isRequired,
 
+    /**
+     * Safe area insets required for reflecting the portion of the view,
+     * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+     */
+    insets: safeAreaInsetPropTypes.isRequired,
+
     /* Onyx Props */
     /** Collection of tags attached to a policy */
     policyTags: tagPropTypes,