From cdea3cf078f6d0093a19103cc3acb02a01e8bd99 Mon Sep 17 00:00:00 2001 From: Cristi Paval Date: Fri, 25 Aug 2023 18:01:27 +0300 Subject: [PATCH] Merge pull request #25921 from thiagobrez/thiagobrez/selection-list-regressions-1 [CP Staging] Fix selection list regressions: page animation, scroll indicator, first member highlight, bold text (cherry picked from commit 837020d9f419319759dd56b503bb3f45386b729e) --- .../CalendarPicker/YearPickerModal.js | 1 + .../SelectionList/BaseSelectionList.js | 13 ++----- .../SelectionList/CheckboxListItem.js | 2 +- src/pages/settings/Profile/PronounsPage.js | 34 +++++++++---------- .../settings/Profile/TimezoneSelectPage.js | 2 ++ src/pages/workspace/WorkspaceInvitePage.js | 1 + src/pages/workspace/WorkspaceMembersPage.js | 7 ++-- 7 files changed, 25 insertions(+), 35 deletions(-) diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js index 00ab73966b4b..1149f9dc56ce 100644 --- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js +++ b/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 /> diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index f14c3fef5d83..60214d60715b 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/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 diff --git a/src/components/SelectionList/CheckboxListItem.js b/src/components/SelectionList/CheckboxListItem.js index 539b436ba65a..81771fb07ce7 100644 --- a/src/components/SelectionList/CheckboxListItem.js +++ b/src/components/SelectionList/CheckboxListItem.js @@ -49,7 +49,7 @@ function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError )} {item.text} diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 50a231523834..ce460bc30ff4 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/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)} /> {props.translate('pronounsPage.isShownOnProfile')} - + {/* Only render pronouns if list was loaded (not filtered list), otherwise initially focused item will be empty */} + {pronounsList.length > 0 && ( + + )} ); } diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index 7bdf1afd498a..d0a50acdeb17 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/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 /> ); diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index b22421167478..8a25d02ec7d8 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -226,6 +226,7 @@ function WorkspaceInvitePage(props) { headerMessage={headerMessage} onSelectRow={toggleOption} showScrollIndicator + shouldDelayFocus /> toggleAllUsers(data)} onDismissError={dismissError} showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)} - initiallyFocusedOptionKey={lodashGet( - _.find(data, (item) => !item.isDisabled), - 'keyForList', - undefined, - )} + shouldDelayFocus + showScrollIndicator />