Scroll To Index throws an error on large datasets when searching

[JDMathew]

This appears to be a race-condition when searching large lists, making a typo, backspacing and updating the search.

[dhumblecoder]

I have the same type of error

[dhumblecoder]

Ok, I tweaked the code in the library a little bit and got it to make it work for my need. here is what got me into this kind of bug, here is the process to reproduce it: 1) clicked on the dropdown arrow, 2) typed the search text, 3) selected what i was searching, 4) value is selected and everything works how is desired. however when the value selected is not the desired value then I repeat procedure: 1) click on the dropdown arrow, 2) type the search text and there the error shows up. decided to search the code at node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx and saw that when you type a search text the second time the FlatList found in the function _renderListHelper() does not refresh when the field was selected the first time. for some reason the function scrollIndex which is called regularly as you type the search text, the index related to the selected value at first time does not get updated for the second search, and the flat list internal indexes do not either. my hack that is making it work for my need was to comment out // refList?.current?.scrollToIndex({ // index: index, // animated: false, // }); that code is inside the function 'scrollIndex' @ node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx around line 285, on version 2.12.0 of the react-native-element-dropdown

[dhumblecoder]

@JDMathew

[JDMathew]

@dhumblecoder

Thanks, to be honest I didn't have time to look into fixing the bug so just prevented it from happening by setting the prop autoScroll={false}

[dhumblecoder]

@dhumblecoder

Thanks, to be honest I didn't have time to look into fixing the bug so just prevented it from happening by setting the prop autoScroll={false}

I tested this solution and is better than mine, since your solution is outside the library in question because is passed on as a prop. Because your solution is external I don't have to tweak the library code which will hurt in the future if I get to be removing and installing the package (in case i need to) or just in case i may need to install a new version. thanks for you solution.

[JDMathew]

I tested this solution and is better than mine, since your solution is outside the library in question because is passed on as a prop. Because your solution is external I don't have to tweak the library code which will hurt in the future if I get to be removing and installing the package (in case i need to) or just in case i may need to install a new version. thanks for you solution.

@dhumblecoder, If you ever run into a similar problem in the future, a really useful package is patch-package. It effectively takes any changes you make to a library code in your node_modules and will create a "patch" (diff) of those changes and then install them on every yarn / npm install. That way if you delete your node modules or install an updated version your changes will be patched on-top of the fresh install. The other advantage is that this patch is shared with the rest of your team once committed to your repo so no one else needs to make the same change in their node_modules

For example, I made a change to this libraries code to debounce the onSearch(...) function because it was being called on every text change event slowing down search for large data sets. Once patch-package is installed in your project all you need to do is make the change to the package you want to patch in your node_modules and then is run in this case patch-package react-native-element-dropdown it then generates a patch diff that runs on every fresh install.