n4kz
How to focus the selected item in dropdown
Hi,
I've large data around 300 rows in dropdown. When I set any value to dropdown and open the dropdown, the selected item doesn't show in view. I need to scroll down to see the selected item - https://hub.mangoapps.com/sf/MTQwOTI3XzE2MDM5MTQ
Is there any way to scroll down to the selected item ?
-Vijay
I am facing same issue . Please let me know if there is any solution to this issue.
The problem here is with item rendering batching. If initialNumToRender items count is lesser that selected item index, then flatlist will still only render the specified items at initial render and then the scroll to the selected item will be performed, scrolling to the bottommost rendered item instead, which is higher that the selected one.
On the small lists the easiest way to fix this is to force the flatlist to render all the items immediately, without batching:
<FlatList
...
initialNumToRender={data.length}
/>
It works well with short lists, but can add an initial render delay when the list is long.
For a really long lists the only way to somehow fix the issue would be to provide the getItemLayout method to the flatlist, allowing it to correctly estimate total list height before scroll reset occurs:
getItemLayout = (data, index) => {
let itemSize = this.itemSize();
return {
index,
length: itemSize,
offset: index * itemSize,
};
};
<FlatList
...
getItemLayout={this.getItemLayout}
initialNumToRender={Math.min(data.length, 100)}
/>
This would create another problem tho: while scrolling to the selected item would work in this case, items after the initial render batch would still be rendered with some delay, which can be pretty noticeable even in release builds.
