[CP Staging] Fix selection list regressions: page animation, scroll indicator, first member highlight, bold text

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -80,6 +80,7 @@ function YearPickerModal(props) {
                     sections={sections}
                     onSelectRow={(option) => props.onYearChange(option.value)}
                     initiallyFocusedOptionKey={props.currentYear.toString()}
+                    showScrollIndicator
                 />
             </ScreenWrapper>
         </Modal>

src/components/SelectionList/BaseSelectionList.js

@@ -133,17 +133,8 @@ function BaseSelectionList({
         };
     }, [canSelectMultiple, sections]);
 
-    const [focusedIndex, setFocusedIndex] = useState(() => {
-        const defaultIndex = 0;
-
-        const indexOfInitiallyFocusedOption = _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey);
-
-        if (indexOfInitiallyFocusedOption >= 0) {
-            return indexOfInitiallyFocusedOption;
-        }
-
-        return defaultIndex;
-    });
+    // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
+    const [focusedIndex, setFocusedIndex] = useState(() => _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey));
 
     /**
      * Scrolls to the desired item index in the section list

src/components/SelectionList/CheckboxListItem.js

@@ -49,7 +49,7 @@ function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError
                 )}
                 <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.pl3, styles.optionRow]}>
                     <Text
-                        style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, item.isSelected && styles.sidebarLinkTextBold]}
+                        style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold]}
                         numberOfLines={1}
                     >
                         {item.text}

src/pages/settings/Profile/PronounsPage.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
@@ -78,13 +78,7 @@ function PronounsPage(props) {
      * Pronouns list filtered by searchValue needed for the OptionsSelector.
      * Empty array if the searchValue is empty.
      */
-    const filteredPronounsList = useMemo(() => {
-        const searchedValue = searchValue.trim();
-        if (searchedValue.length === 0) {
-            return [];
-        }
-        return _.filter(pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0);
-    }, [pronounsList, searchValue]);
+    const filteredPronounsList = _.filter(pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchValue.trim().toLowerCase()) >= 0);
 
     const headerMessage = searchValue.trim() && !filteredPronounsList.length ? props.translate('common.noResultsFound') : '';
 
@@ -104,16 +98,20 @@ function PronounsPage(props) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
             <Text style={[styles.ph5, styles.mb3]}>{props.translate('pronounsPage.isShownOnProfile')}</Text>
-            <SelectionList
-                headerMessage={headerMessage}
-                textInputLabel={props.translate('pronounsPage.pronouns')}
-                textInputPlaceholder={props.translate('pronounsPage.placeholderText')}
-                textInputValue={searchValue}
-                sections={[{data: filteredPronounsList, indexOffset: 0}]}
-                onSelectRow={updatePronouns}
-                onChangeText={onChangeText}
-                initiallyFocusedOptionKey={initiallyFocusedOption.keyForList}
-            />
+            {/* Only render pronouns if list was loaded (not filtered list), otherwise initially focused item will be empty */}
+            {pronounsList.length > 0 && (
+                <SelectionList
+                    headerMessage={headerMessage}
+                    textInputLabel={props.translate('pronounsPage.pronouns')}
+                    textInputPlaceholder={props.translate('pronounsPage.placeholderText')}
+                    textInputValue={searchValue}
+                    sections={[{data: filteredPronounsList, indexOffset: 0}]}
+                    onSelectRow={updatePronouns}
+                    onChangeText={onChangeText}
+                    initiallyFocusedOptionKey={initiallyFocusedOption.keyForList}
+                    shouldDelayFocus
+                />
+            )}
         </ScreenWrapper>
     );
 }

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -78,6 +78,8 @@ function TimezoneSelectPage(props) {
                 onSelectRow={saveSelectedTimezone}
                 sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
                 initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
+                shouldDelayFocus
+                showScrollIndicator
             />
         </ScreenWrapper>
     );

src/pages/workspace/WorkspaceInvitePage.js

@@ -226,6 +226,7 @@ function WorkspaceInvitePage(props) {
                             headerMessage={headerMessage}
                             onSelectRow={toggleOption}
                             showScrollIndicator
+                            shouldDelayFocus
                         />
                         <View style={[styles.flexShrink0]}>
                             <FormAlertWithSubmitButton

src/pages/workspace/WorkspaceMembersPage.js

@@ -393,11 +393,8 @@ function WorkspaceMembersPage(props) {
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
                             showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)}
-                            initiallyFocusedOptionKey={lodashGet(
-                                _.find(data, (item) => !item.isDisabled),
-                                'keyForList',
-                                undefined,
-                            )}
+                            shouldDelayFocus
+                            showScrollIndicator
                         />
                     </View>
                 </View>