Update deepSearchInArr.js

[rrscodes]

The search was not working when the list items are huge. It was inefficient because it's not terminating the search once it finds a match. A better approach was to use JavaScript's built-in array methods, like filter(). This method creates a new array with all elements that pass the test implemented by the provided function.

[rrscodes]

@AdelRedaa97 ^

[AdelRedaa97]

does this solve when data are huge?

[rrscodes]

does this solve when data are huge?

Yes

[raychanks]

Related to #148

Using the .filter method will not terminate the search, the performance will be similar to the original implementation using a for-loop.

The reason why the search does not work when the list is huge is because of null being pushed into the array when the item doesn't match the query. In addition to that, because the height of each item in the FlatList is calculated by getItemLayout in useLayoutDropdown, having nulls in the array messed up the layout calculation for large dataset.

Therefore, if we stop pushing null into the array, the bug should be resolved. Using the .filter method as @rrscodes suggested looks cleaner as well.

[donemuhendislik]

@rrscodes Hi, thanks for your solution. I copied your solution into deepSearchInArr.js. Now, it can search as expected. But, while I searched the target, and then click on it for selecting, but my selection not works and selects the first row automatically. Could you suggest any additional solution for this ?

[AdelRedaa97]

Without push null there will be a problem with the indexes as the default index will point to another item, for example, if we have an array ['aa', 'b', 'ca', 'da'] and the default index prop is set to 2 and then he used the search and he typed 'a' the without pushing null to the array the default index will change to be ''da'' instead of ''ca''

[raychanks]

@AdelRedaa97 You're right, removing null causes another issue. Fixing the index seems to be quite involved and risky, it might break other things as we don't have tests.

Another way to fix the search issue is to keep on pushing null into the array, but removing the getItemLayout method from the FlatList so the FlatList can calculate the layout correctly. This might hurt the performance a little bit, but I think it's better than having incorrect behavior. What do you think?

[donemuhendislik]

Hi again, I read your answers and I confused a little bit because of being new in react native. Could you talk on this, that was written as code linked at the top of this topic. Which null or FlatList in here ? (deepSearchInArr.js file)

By the way, as I wrote on my previous message, search works very well, just we confused on selecting searched element on our list (This list is for countries). When we select it, as you said there is a different index key, it gets a different result, not we selected.

`const contains = (item, searchTxt) => { // item is an object if (typeof item == 'object' && item != null) { for (let key in item) { const value = item[key]; if (contains(value, searchTxt)) { return true; } } } // string, number or boolean if (typeof item != 'object' && item != null && item != undefined) { const itemStringfied = item.toString().toLowerCase(); const searchTxtStringfied = searchTxt.toString().toLowerCase(); if (itemStringfied.includes(searchTxtStringfied)) { return true; } } return false; };

export const deepSearchInArr = (query, arr) => { // handle edge cases if (!arr || !query) { return []; }

// use filter to get elements that pass the contains test return arr.filter(item => contains(item, query)); }; `

[raychanks]

@donemuhendislik I was talking about removing the prop from this line of code (such as deleting the line), and also restore the changes made in the PR (that means use the original version from master), then you should be good to go. But in the long run, it would be better to fix it from this library instead of patching the package by yourself.

[Sim178]

Any update on this?

[AdelRedaa97]

I've made an update that might fix the problem in this commit https://github.com/AdelRedaa97/react-native-select-dropdown/commit/59505a477270a87966b3c4f6acf65e5e9c205281 ,,, I removed push(null) and fixed the index problem that happened when push(null) has been removed.