Content jumps to selected value after the dropdown is opened

[moooss]

Thanks for this great lib.

I don't get if it is the expected behavior or a bug, but when I open the dropdown, it takes a small time for the selected value to be displayed correctly.

I have set up a new expo project, with the first Dropdown example given in the Readme, and you can see the result in the video below.

Would be great to know if it is normal or if I can expect a better UX.

Thanks !

"expo": "51" "react-native-element-dropdown": "2.12.1",

https://github.com/user-attachments/assets/fa38183e-b631-45ea-9bc1-895d642a5941

[Sampino]

I fixed it by using this prop: autoScroll={false}. It should work. I know that when the dropdown is opened, the selected value may not be displayed, but at least there is no 'jump,' and it can be a nice workaround for now.

[moooss]

@Sampino thanks for your suggestion. It hides the issue but I feel like not going to the selected value looks also like a bug for the user 😕

[UmidbekU]

@moooss @Sampino Instead of just making autoScroll={false}. Make autoScroll={false} and use flatListProps for more control. You'll need to configure a few additional parameters, as demonstrated in the example below:

1. initialScrollIndex: activeIndex >= 0 ? activeIndex : 0
2. getItemLayout:

   getItemLayout: (_, index) => ({
   length: TOTAL_HEIGHT,
   offset: TOTAL_HEIGHT * index,
   index
   })

In my case, TOTAL_HEIGHT is the sum of the renderItem height and the height of the ItemSeparatorComponent. With these settings, the correct element will always open smoothly, without any glitches or unnecessary animations.

Here’s an example:

const activeIndex = useMemo(
  () => findIndex(data, item => item.value === field.value) || 0,
  [data],
);

<Dropdown
    autoScroll={false}
    flatListProps={{
       ItemSeparatorComponent: () => <View style={{ height: 1, width: '100%', backgroundColor: 'grey' }} />,
       initialScrollIndex: activeIndex >= 0 ? activeIndex : 0,
       getItemLayout: (_, index) => ({
           length: 45,
           offset: 45 * index,
           index,
       })
    }} />