From fddb5cd186745c2c5c95c6bf8d1880b4d963392d Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 11:21:20 +0100 Subject: [PATCH 1/8] fix(selection-list): bold text even if unselected --- src/components/SelectionList/CheckboxListItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} From 64e3dbeff539c9da1bbc55fca75bb578b5553284 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 11:21:41 +0100 Subject: [PATCH 2/8] fix(selection-list): dont auto focus first item --- src/components/SelectionList/BaseSelectionList.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index f14c3fef5d83..e7d33a283252 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -134,15 +134,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 + return _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey); }); /** From af6fe92cdecd928fff85eb36c21e6e06c7ea68ba Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 11:21:58 +0100 Subject: [PATCH 3/8] fix(selection-list): page animation and scroll indicator --- src/components/NewDatePicker/CalendarPicker/YearPickerModal.js | 1 + src/pages/settings/Profile/PronounsPage.js | 1 + src/pages/settings/Profile/TimezoneSelectPage.js | 2 ++ src/pages/workspace/WorkspaceInvitePage.js | 2 ++ src/pages/workspace/WorkspaceMembersPage.js | 2 ++ 5 files changed, 8 insertions(+) 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/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 50a231523834..1653c27e5347 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -113,6 +113,7 @@ function PronounsPage(props) { onSelectRow={updatePronouns} onChangeText={onChangeText} initiallyFocusedOptionKey={initiallyFocusedOption.keyForList} + shouldDelayFocus /> ); 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..6ed7fe933c87 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -226,6 +226,8 @@ function WorkspaceInvitePage(props) { headerMessage={headerMessage} onSelectRow={toggleOption} showScrollIndicator + shouldDelayFocus + showScrollIndicator /> toggleAllUsers(data)} onDismissError={dismissError} showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)} + shouldDelayFocus + showScrollIndicator initiallyFocusedOptionKey={lodashGet( _.find(data, (item) => !item.isDisabled), 'keyForList', From ff64ee9f70bf152e86d61227fcc76a33ad1ebfcd Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 11:36:44 +0100 Subject: [PATCH 4/8] fix(selection-list): fix lint --- src/components/SelectionList/BaseSelectionList.js | 6 ++---- src/pages/workspace/WorkspaceInvitePage.js | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index e7d33a283252..60214d60715b 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -133,10 +133,8 @@ function BaseSelectionList({ }; }, [canSelectMultiple, sections]); - const [focusedIndex, setFocusedIndex] = useState(() => { - // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member - return _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey); - }); + // 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/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index 6ed7fe933c87..8a25d02ec7d8 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -227,7 +227,6 @@ function WorkspaceInvitePage(props) { onSelectRow={toggleOption} showScrollIndicator shouldDelayFocus - showScrollIndicator /> Date: Fri, 25 Aug 2023 11:51:35 +0100 Subject: [PATCH 5/8] fix(selection-list): remove initiallyFocusedOption from WorkspaceMembersPage --- src/pages/workspace/WorkspaceMembersPage.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 3f18821cb20b..d598f90e4326 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -395,11 +395,6 @@ function WorkspaceMembersPage(props) { showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)} shouldDelayFocus showScrollIndicator - initiallyFocusedOptionKey={lodashGet( - _.find(data, (item) => !item.isDisabled), - 'keyForList', - undefined, - )} /> From 19aaf955ee79fcf64f51b3f1446271bb280bc711 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 12:02:54 +0100 Subject: [PATCH 6/8] fix(selection-list): render pronouns after load --- src/pages/settings/Profile/PronounsPage.js | 24 ++++++++++++---------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 1653c27e5347..4380707e0418 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -104,17 +104,19 @@ function PronounsPage(props) { onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> {props.translate('pronounsPage.isShownOnProfile')} - + {filteredPronounsList.length > 0 && ( + + )} ); } From 86ebe9355dbcf7f8ff3c0165f71085e1644ae952 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Fri, 25 Aug 2023 12:23:00 +0100 Subject: [PATCH 7/8] fix(selection-list): render pronouns after load --- src/pages/settings/Profile/PronounsPage.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 4380707e0418..784db6864a3e 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -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,7 +98,8 @@ function PronounsPage(props) { onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> {props.translate('pronounsPage.isShownOnProfile')} - {filteredPronounsList.length > 0 && ( + {/* Only render pronouns if list was loaded (not filtered list), otherwise initially focused item will be empty */} + {pronounsList.length > 0 && ( Date: Fri, 25 Aug 2023 12:27:23 +0100 Subject: [PATCH 8/8] fix(selection-list): fix lint --- src/pages/settings/Profile/PronounsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 784db6864a3e..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';