From d733aa2b8cf8eef93921e0e85f4fc5ecd4cc3460 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Wed, 10 Jan 2024 00:34:28 +0200 Subject: [PATCH 01/13] fix selection list focus --- .../SelectionList/BaseSelectionList.js | 65 +++++++++++++++++-- 1 file changed, 59 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 88c4018f823c..3ee042a0b768 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -17,6 +17,7 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar import useActiveElement from '@hooks/useActiveElement'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; +import usePrevious from '@hooks/usePrevious'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -362,18 +363,37 @@ function BaseSelectionList({ }, [shouldShowTextInput]), ); + const prevTextInputValue = usePrevious(textInputValue); useEffect(() => { // do not change focus on the first render, as it should focus on the selected item - if (isInitialSectionListRender) { + if (isInitialSectionListRender || prevTextInputValue === textInputValue) { return; } - // set the focus on the first item when the sections list is changed if (sections.length > 0) { - updateAndScrollToFocusedIndex(0); + let newSelectedIndex; + + if (textInputValue === '') { + // if the textInputValue is empty then focus is removed + newSelectedIndex = -1; + } else { + // if multiple selection then focus on the first non-selected item + // else focus on the first item + newSelectedIndex = canSelectMultiple ? flattenedSections.selectedOptions.length + flattenedSections.disabledOptionsIndexes.length : 0; + } + + updateAndScrollToFocusedIndex(newSelectedIndex); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [sections]); + }, [ + canSelectMultiple, + flattenedSections.disabledOptionsIndexes.length, + flattenedSections.selectedOptions.length, + isInitialSectionListRender, + prevTextInputValue, + sections, + textInputValue, + updateAndScrollToFocusedIndex, + ]); /** Selects row when pressing Enter */ useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { @@ -390,6 +410,39 @@ function BaseSelectionList({ isActive: !disableKeyboardShortcuts && Boolean(onConfirm) && isFocused, }); + function sortSectionItems(sectionsList) { + // If multiple selection is not allowed, return the original list + if (!canSelectMultiple) { + return sectionsList; + } + + return _.map(sectionsList, (section) => { + // Classify each item in the section + const disabledItems = []; + const selectedItems = []; + const unselectedItems = []; + + section.data.forEach((item) => { + if (item.isDisabled) { + disabledItems.push(item); + } else if (item.isSelected) { + selectedItems.push(item); + } else { + unselectedItems.push(item); + } + }); + + // Combine items in the order: disabled, selected, unselected + const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems]; + + // Return the section with updated data + return { + ...section, + data: sortedData, + }; + }); + } + return ( Date: Fri, 12 Jan 2024 09:50:58 +0200 Subject: [PATCH 02/13] Using memo on the sorted sections --- src/components/SelectionList/BaseSelectionList.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 3ee042a0b768..bc5d7e603e16 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -410,14 +410,13 @@ function BaseSelectionList({ isActive: !disableKeyboardShortcuts && Boolean(onConfirm) && isFocused, }); - function sortSectionItems(sectionsList) { + const sortedSections = useMemo(() => { // If multiple selection is not allowed, return the original list if (!canSelectMultiple) { - return sectionsList; + return sections; } - return _.map(sectionsList, (section) => { - // Classify each item in the section + return _.map(sections, (section) => { const disabledItems = []; const selectedItems = []; const unselectedItems = []; @@ -431,17 +430,14 @@ function BaseSelectionList({ unselectedItems.push(item); } }); - // Combine items in the order: disabled, selected, unselected const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems]; - - // Return the section with updated data return { ...section, data: sortedData, }; }); - } + }, [sections, canSelectMultiple]); return ( Date: Wed, 17 Jan 2024 20:18:36 +0200 Subject: [PATCH 03/13] Convert changes to typescript --- src/components/SelectionList/BaseSelectionList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 286f8c2fe6a2..725d3f5da49d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -412,10 +412,10 @@ function BaseSelectionList( return sections; } - return _.map(sections, (section) => { - const disabledItems = []; - const selectedItems = []; - const unselectedItems = []; + return sections.map((section) => { + const disabledItems: TItem[] = []; + const selectedItems: TItem[] = []; + const unselectedItems: TItem[] = []; section.data.forEach((item) => { if (item.isDisabled) { From d53c12fea4b3ca1166342e73090ec15032f2bab0 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Wed, 17 Jan 2024 20:25:24 +0200 Subject: [PATCH 04/13] Minor --- src/components/SelectionList/BaseSelectionList.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 725d3f5da49d..4ee83915c8bf 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -1,8 +1,8 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import React, {forwardRef, useCallback, useMemo, useRef, useState} from 'react'; import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListRenderItemInfo} from 'react-native'; +import {View} from 'react-native'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; @@ -16,9 +16,6 @@ import TextInput from '@components/TextInput'; import useActiveElementRole from '@hooks/useActiveElementRole'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; -import usePrevious from '@hooks/usePrevious'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; import variables from '@styles/variables'; From 8ab65761c3a4bd97477a5bef10383db06122ef46 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Wed, 17 Jan 2024 20:57:17 +0200 Subject: [PATCH 05/13] migrating to ts --- src/components/SelectionList/BaseSelectionList.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 4ee83915c8bf..8ca4ed4585ca 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -1,6 +1,6 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; -import React, {forwardRef, useCallback, useMemo, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListRenderItemInfo} from 'react-native'; import {View} from 'react-native'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; @@ -16,6 +16,7 @@ import TextInput from '@components/TextInput'; import useActiveElementRole from '@hooks/useActiveElementRole'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; +import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; import variables from '@styles/variables'; @@ -358,7 +359,7 @@ function BaseSelectionList( const prevTextInputValue = usePrevious(textInputValue); useEffect(() => { - // do not change focus on the first render, as it should focus on the selected item + // do not change focus on the first render or when the textInputValue is the same if (isInitialSectionListRender || prevTextInputValue === textInputValue) { return; } From 6d9a69fc413cd033758afed02516a0174ceae896 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Fri, 26 Jan 2024 03:53:02 +0200 Subject: [PATCH 06/13] fix arrow selection --- .../SelectionList/BaseSelectionList.tsx | 81 ++++++++++--------- 1 file changed, 43 insertions(+), 38 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index ddfe714a4538..47296d7f29e2 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -1,8 +1,8 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListRenderItemInfo} from 'react-native'; +import {View} from 'react-native'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; @@ -74,6 +74,41 @@ function BaseSelectionList( const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); + /** + * Sorts sections in the list based on the selection status and whether items are disabled. + * Disabled items are moved to the top, followed by selected items, and then unselected items. + */ + const sortedSections = useMemo(() => { + // If multiple selection is not allowed, return the original list + if (!canSelectMultiple) { + return sections; + } + + return sections.map((section) => { + const disabledItems: TItem[] = []; + const selectedItems: TItem[] = []; + const unselectedItems: TItem[] = []; + + section.data.forEach((item) => { + if (item.isDisabled) { + disabledItems.push(item); + } else if (item.isSelected) { + selectedItems.push(item); + } else { + unselectedItems.push(item); + } + }); + + // Combine items in the order: disabled, selected, unselected + const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems]; + + return { + ...section, + data: sortedData, + }; + }); + }, [canSelectMultiple, sections]); + /** * Iterates through the sections and items inside each section, and builds 3 arrays along the way: * - `allOptions`: Contains all the items in the list, flattened, regardless of section @@ -92,7 +127,7 @@ function BaseSelectionList( const selectedOptions: TItem[] = []; - sections.forEach((section, sectionIndex) => { + sortedSections.forEach((section, sectionIndex) => { const sectionHeaderHeight = variables.optionsListSectionHeaderHeight; itemLayouts.push({length: sectionHeaderHeight, offset}); offset += sectionHeaderHeight; @@ -143,7 +178,7 @@ function BaseSelectionList( itemLayouts, allSelected: selectedOptions.length > 0 && selectedOptions.length === allOptions.length - disabledOptionsIndexes.length, }; - }, [canSelectMultiple, sections]); + }, [canSelectMultiple, sortedSections]); // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member const [focusedIndex, setFocusedIndex] = useState(() => flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey)); @@ -173,7 +208,7 @@ function BaseSelectionList( // 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 (sections[i].data) { + if (sortedSections[i].data) { adjustedSectionIndex--; } } @@ -365,7 +400,7 @@ function BaseSelectionList( return; } // set the focus on the first item when the sections list is changed - if (sections.length > 0) { + if (flattenedSections.allOptions.length > 0) { let newSelectedIndex; if (textInputValue === '') { @@ -379,13 +414,12 @@ function BaseSelectionList( updateAndScrollToFocusedIndex(newSelectedIndex); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ canSelectMultiple, + flattenedSections.allOptions.length, flattenedSections.disabledOptionsIndexes.length, flattenedSections.selectedOptions.length, - isInitialSectionListRender, - prevTextInputValue, - sections, textInputValue, updateAndScrollToFocusedIndex, ]); @@ -405,35 +439,6 @@ function BaseSelectionList( isActive: !disableKeyboardShortcuts && !!onConfirm && isFocused, }); - const sortedSections = useMemo(() => { - // If multiple selection is not allowed, return the original list - if (!canSelectMultiple) { - return sections; - } - - return _.map(sections, (section) => { - const disabledItems = []; - const selectedItems = []; - const unselectedItems = []; - - section.data.forEach((item) => { - if (item.isDisabled) { - disabledItems.push(item); - } else if (item.isSelected) { - selectedItems.push(item); - } else { - unselectedItems.push(item); - } - }); - // Combine items in the order: disabled, selected, unselected - const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems]; - return { - ...section, - data: sortedData, - }; - }); - }, [sections, canSelectMultiple]); - return ( Date: Sat, 27 Jan 2024 03:41:41 +0200 Subject: [PATCH 07/13] Update src/components/SelectionList/BaseSelectionList.tsx Co-authored-by: Fedi Rajhi --- src/components/SelectionList/BaseSelectionList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 47296d7f29e2..bb8446361de8 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -395,8 +395,8 @@ function BaseSelectionList( const prevTextInputValue = usePrevious(textInputValue); useEffect(() => { - // do not change focus when the textInputValue is the same - if (prevTextInputValue === textInputValue) { + // Avoid changing focus if the textInputValue remains unchanged. + if (prevTextInputValue === textInputValue || flattenedSections.allOptions.length === 0) { return; } // set the focus on the first item when the sections list is changed From a015eb52c275045455099ea56aa0da7985758cba Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab <59809993+abzokhattab@users.noreply.github.com> Date: Sat, 27 Jan 2024 03:42:06 +0200 Subject: [PATCH 08/13] comments changes Co-authored-by: Fedi Rajhi --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index bb8446361de8..14837712ee28 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -76,7 +76,7 @@ function BaseSelectionList( /** * Sorts sections in the list based on the selection status and whether items are disabled. - * Disabled items are moved to the top, followed by selected items, and then unselected items. + * Selected items are moved to the top, followed by unselected items, and then disabled items. */ const sortedSections = useMemo(() => { // If multiple selection is not allowed, return the original list From b8f58a2ea2d80f298627f1df4b1c0f8fca8318c5 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab <59809993+abzokhattab@users.noreply.github.com> Date: Sat, 27 Jan 2024 03:53:26 +0200 Subject: [PATCH 09/13] minor Co-authored-by: Fedi Rajhi --- .../SelectionList/BaseSelectionList.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 14837712ee28..2d769cfcb148 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -400,20 +400,14 @@ function BaseSelectionList( return; } // set the focus on the first item when the sections list is changed - if (flattenedSections.allOptions.length > 0) { - let newSelectedIndex; - - if (textInputValue === '') { - // if the textInputValue is empty then focus is removed - newSelectedIndex = -1; - } else { - // if multiple selection then focus on the first non-selected item - // else focus on the first item - newSelectedIndex = canSelectMultiple ? flattenedSections.selectedOptions.length + flattenedSections.disabledOptionsIndexes.length : 0; - } + let newSelectedIndex = -1; - updateAndScrollToFocusedIndex(newSelectedIndex); + if (textInputValue !== '') { + // Focus on the first non-selected item if multiple selection, otherwise focus on the first item + newSelectedIndex = canSelectMultiple ? flattenedSections.selectedOptions.length + flattenedSections.disabledOptionsIndexes.length : 0; } + + updateAndScrollToFocusedIndex(newSelectedIndex); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ canSelectMultiple, From 322d554ec1990d6d36e4d67048a4dc34d45ad16c Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Mon, 5 Feb 2024 10:59:24 +0200 Subject: [PATCH 10/13] Removing the sortedsections logic --- .../SelectionList/BaseSelectionList.tsx | 59 ++----------------- 1 file changed, 6 insertions(+), 53 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index d728760a2654..a0c7b289c920 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -74,41 +74,6 @@ function BaseSelectionList( const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); - /** - * Sorts sections in the list based on the selection status and whether items are disabled. - * Selected items are moved to the top, followed by unselected items, and then disabled items. - */ - const sortedSections = useMemo(() => { - // If multiple selection is not allowed, return the original list - if (!canSelectMultiple) { - return sections; - } - - return sections.map((section) => { - const disabledItems: TItem[] = []; - const selectedItems: TItem[] = []; - const unselectedItems: TItem[] = []; - - section.data.forEach((item) => { - if (item.isDisabled) { - disabledItems.push(item); - } else if (item.isSelected) { - selectedItems.push(item); - } else { - unselectedItems.push(item); - } - }); - - // Combine items in the order: disabled, selected, unselected - const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems]; - - return { - ...section, - data: sortedData, - }; - }); - }, [canSelectMultiple, sections]); - /** * Iterates through the sections and items inside each section, and builds 3 arrays along the way: * - `allOptions`: Contains all the items in the list, flattened, regardless of section @@ -127,7 +92,7 @@ function BaseSelectionList( const selectedOptions: TItem[] = []; - sortedSections.forEach((section, sectionIndex) => { + sections.forEach((section, sectionIndex) => { const sectionHeaderHeight = variables.optionsListSectionHeaderHeight; itemLayouts.push({length: sectionHeaderHeight, offset}); offset += sectionHeaderHeight; @@ -178,7 +143,7 @@ function BaseSelectionList( itemLayouts, allSelected: selectedOptions.length > 0 && selectedOptions.length === allOptions.length - disabledOptionsIndexes.length, }; - }, [canSelectMultiple, sortedSections]); + }, [canSelectMultiple, sections]); // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member const [focusedIndex, setFocusedIndex] = useState(() => flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey)); @@ -389,24 +354,12 @@ function BaseSelectionList( if (prevTextInputValue === textInputValue || flattenedSections.allOptions.length === 0) { return; } - // set the focus on the first item when the sections list is changed - let newSelectedIndex = -1; - - if (textInputValue !== '') { - // Focus on the first non-selected item if multiple selection, otherwise focus on the first item - newSelectedIndex = canSelectMultiple ? flattenedSections.selectedOptions.length + flattenedSections.disabledOptionsIndexes.length : 0; - } + // Remove the focus if the search input is empty else focus on the first non disabled item + const newSelectedIndex = textInputValue !== '' ? flattenedSections.disabledOptionsIndexes.length : -1; updateAndScrollToFocusedIndex(newSelectedIndex); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - canSelectMultiple, - flattenedSections.allOptions.length, - flattenedSections.disabledOptionsIndexes.length, - flattenedSections.selectedOptions.length, - textInputValue, - updateAndScrollToFocusedIndex, - ]); + }, [canSelectMultiple, flattenedSections.allOptions.length, flattenedSections.disabledOptionsIndexes.length, textInputValue, updateAndScrollToFocusedIndex]); /** Selects row when pressing Enter */ useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { @@ -497,7 +450,7 @@ function BaseSelectionList( )} Date: Tue, 6 Feb 2024 18:25:20 +0200 Subject: [PATCH 11/13] Update src/components/SelectionList/BaseSelectionList.tsx Co-authored-by: Fedi Rajhi --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index a0c7b289c920..484a47d49d7e 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -359,7 +359,7 @@ function BaseSelectionList( updateAndScrollToFocusedIndex(newSelectedIndex); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [canSelectMultiple, flattenedSections.allOptions.length, flattenedSections.disabledOptionsIndexes.length, textInputValue, updateAndScrollToFocusedIndex]); + }, [canSelectMultiple, flattenedSections.allOptions.length, prevTextInputValue, textInputValue, updateAndScrollToFocusedIndex]); /** Selects row when pressing Enter */ useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { From 86d242d2e6c4f615b1f60f54affc0b773e6578ec Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Tue, 6 Feb 2024 22:18:39 +0200 Subject: [PATCH 12/13] Adjusting useEffect dependencies --- src/components/SelectionList/BaseSelectionList.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 484a47d49d7e..5a0f4c06426c 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -355,10 +355,9 @@ function BaseSelectionList( return; } // Remove the focus if the search input is empty else focus on the first non disabled item - const newSelectedIndex = textInputValue !== '' ? flattenedSections.disabledOptionsIndexes.length : -1; + const newSelectedIndex = textInputValue !== '' ? 0 : -1; updateAndScrollToFocusedIndex(newSelectedIndex); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [canSelectMultiple, flattenedSections.allOptions.length, prevTextInputValue, textInputValue, updateAndScrollToFocusedIndex]); /** Selects row when pressing Enter */ From f4393b1343e155e5713eea83ebdd017e51b5e77a Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab <59809993+abzokhattab@users.noreply.github.com> Date: Thu, 15 Feb 2024 00:39:46 +0200 Subject: [PATCH 13/13] minor edit Co-authored-by: Monil Bhavsar --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index cdea6b2a2473..e81bbb27d20e 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -355,7 +355,7 @@ function BaseSelectionList( return; } // Remove the focus if the search input is empty else focus on the first non disabled item - const newSelectedIndex = textInputValue !== '' ? 0 : -1; + const newSelectedIndex = textInputValue === '' ? -1 : 0; updateAndScrollToFocusedIndex(newSelectedIndex); }, [canSelectMultiple, flattenedSections.allOptions.length, prevTextInputValue, textInputValue, updateAndScrollToFocusedIndex]);