Clicking on an item using Custom Menu scrolls to top

[arunmmanoharan]

Thanks for using react-select!

If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this. Questions and feature requests have their own place in our discussions section.

Are you reporting a bug or runtime error?

I am building out a suggestions list to show the user what options they can select in a multiselect. However, when I click on an item, it scrolls to top.

https://playcode.io/1944459

Select any 3 items from Dropdown 1, they will be shown as suggestions for dropdown 2. In dropdown 2, select the last item in the list. Notice that the menu gets scrolled to top. I want to maintain the scroll position. Please advice.

[imwaihon]

Not sure if you fixed this already, but in case anyone is wondering: you can prevent unnecessary rerenders that causes this behaviour by making sure you define your rendering components outside the scope of rendering the Select.

When defining replacement components, it is important to do so outside the scope of rendering the Select. Defining a replacement component directly in the components prop can cause issues.

see https://react-select.com/components#defining-components

example:

        components={{
          Control,
          Option,
          Menu,
          GroupHeading,
          MenuList,
          DropdownIndicator: null,
          IndicatorSeparator: null,
        }}