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,
        }}

[slashn05]

Hi @imwaihon
yeah it works fine when moving out the Menu component out, but i have a usecase where i want the props for some buttons to flow in from parent as below and this causes the Menu to re-render and lose the scroll postion. Any suggestions to get this to work.

[imwaihon]

Hi @imwaihon yeah it works fine when moving out the Menu component out, but i have a usecase where i want the props for some buttons to flow in from parent as below and this causes the Menu to re-render and lose the scroll postion. Any suggestions to get this to work.

Your Custommenu will always be remounted when onApply prop changes for MySelect. To prevent this from happening, see https://react-select.com/components#defining-components again. Note this part that Custom component should be declared outside of the Select scope. But how can we pass in the onApply custom prop then you might ask?

This is a bit confusing due to a lack of clearcut examples but you can use the selectProps under the example Custom Component with selectProps Example.

Sample rough example with a 'testProp'

const MySelect = ({testProp}) => <ReactSelect testProp={testProp} components={{ Menu: testMenu } ....... other props />

const testMenu = (props) => {
  return (
    <components.Menu {...props}>
      {props?.children}
      {props?.selectProps.testProp}
    </components.Menu>
  );
};

My guess is that this works because of https://legacy.reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method the diffing algorithm.

[imwaihon]

If this still does not work, we can consider storing a ref to the previous scrollPosition for each Select