React-select: Multi-select scrolls to top after selecting (v.1.0.0)

[steinso]

Problem: After selecting an option in a multi-select enabled component, the option menu automatically scrolls to the top.

I have debugged this a bit, and it looks like the reason is that on render it wants to focus the selected option, however in multi-select mode, that option is removed from the option menu. This makes it default to the first element in the menu.

5th line in render function, and this.getFocusableOption.

One way to go about this could be to find the adjacent option in the props.options list, and then find the same option in the _visibleOptions list.

[prateekjahead]

Facing the same issue. I think an expected behaviour would be to maintain the scroll position of the menu on selecting an option and just pull up the remaining options in the list.

[dsoriano]

+1
If the PR of @steinso is OK, is it possible to merge ?

[FourwingsY]

+1

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

+1

[BossGrand]

+1

[swiharta]

Maybe it's been fixed in the meantime, but for me in multi mode it's actually scrolling to and highlighting the option immediately following to the last selected option (which is removed from options in multi mode), which I assume is the desirable behavior.

But, I wish there was at least a setting to always leave the scroll position at the top when opening the menu, whether multi-select or single. I have no interest in retaining the scroll position of the last selected item for my use case, and the best way I have found to eliminate this is to edit the source code, in componentDidUpdate, I just commented out the first if statement block...

        key: 'componentDidUpdate',
        value: function componentDidUpdate(prevProps, prevState) {
            // focus to the selected option
            if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) {
                var focusedOptionNode = _reactDom2.default.findDOMNode(this.focused);
                var menuNode = _reactDom2.default.findDOMNode(this.menu);
                menuNode.scrollTop = focusedOptionNode.offsetTop;
                this.hasScrolledToOption = true;
            } else if (!this.state.isOpen) {
                this.hasScrolledToOption = false;
            }

If there was an option to disable scrolling (and highlighting), the last selected option (which ends up being the next adjacent option in multi mode), it would be great.

[vitaliikobrin]

Hi everyone!

I'm still facing the issue with scroll. I'm using V2 of the component and as I see everything has changed. I cannot find the above code anymore. Do somebody deal with it in 2019? Maybe I missed some component option. Or there is another part of code caused the issue.

This is critical for me as I'd like to keep multi-select opened while a user selects options. The idea is to close the dropdown when a user clicks on submit button inside it. But the dropdown scrolls up every time a user selects an option and this makes the idea totally unusable.

Is it possible to fix the issue on my side?

[hogiyogi597]

+1

[yashug]

@vitaliikobrin did you found a solution to this? I am also facing the same issue

[pbeleckis]

Any news on this issue? Is there a some kind of workaround?

[Gazpa]

Experiencing the same issue. In my case I use the multi option and a custom menu selection popup. On the first click anywhere in the popup container it will scroll to top in case the input is not visible in the page.

[aliazizi]

+1

[aliazizi]

@bladey why not confirmed? this is a huge bug

[bladey]

Hi @aliazizi, thanks for your feedback.

Can you please confirm this issue is still affecting v3 of react-select?

In an effort to sustain the react-select project going forward, we're cleaning up and closing old issues using v1 and v2 of react-select.

In the best interest of supporting the broader community we have to direct our efforts towards the current major version v3 and beyond.

[alikrodrigues]

Hi @bladey , I'm not the author.. but I can confirm this issue in 3.1.0.

[bladey]

Thanks @alikrodrigues, I appreciate the feedback.

[bladey]

@alikrodrigues I just tweaked the sandbox example and I'm unable to reproduce the issue, could you let me know what I'm missing from my config (it also works when searching and selecting).

https://codesandbox.io/s/react-codesandboxer-example-ewd44

[alikrodrigues]

Hi @bladey thanks for answered, When I use a wrapMenuList to show the selected the focus will redirect to MenuList..
When I removed and show just the badges the work it's ok..

Here is my Select Component

and here is my MenuList

[aliazizi]

@bladey I reproduce the problem

You can see it here

https://codesandbox.io/s/react-codesandboxer-example-5xmq0?file=/index.js

The problem happen when override MenuList component with hideSelectedOptions and closeMenuOnSelect set to false

Can you confirm this bug now?

Update:
The poblem also exist when overwirte Menu component

[calvinherd9]

Running into this issue also, I have a custom Menu Item component and closeMenuOnSelect set to false. Have you found a workaround to this issue or is this just a bug that can't be solved

[Rall3n]

@aliazizi Common mistake with Reacts render method: You are defining your MenuList component inside the render method. As this method is called on every change to the components state, the MenuList component is also redefined every time, which causes the HTML element to be replaced and the scroll-to-top to happen.

Solution: Move your component outside of the render method.

const MenuList = () => { /* ... */ };

/* ...*/

render() {
    return <Select components={{ MenuList }} />;
}

[bladey]

Thanks for the answer @Rall3n!

I can confirm this works, I modified the Codesandbox here - https://codesandbox.io/s/react-codesandboxer-example-4mj9p?file=/index.js

The problem no longer exists for me @aliazizi and @calvinherd9, let me know.

[aliazizi]

@Rall3n! thanks, it's working

@bladey thank you it's working now

[alikrodrigues]

Thanks guys, It's working for me too.