Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make sure the selected option is immediately visible when the menu is open #3535

Closed
ArthurOllier opened this issue May 2, 2019 · 9 comments

Comments

@ArthurOllier
Copy link

Hello we were looking for a feature that seems broken :
#724
if not please let me know.

We have a fetch on focus from our backend
And we want the same as pull 724:
"Make sure the selected option is immediately visible when the menu is open"

actually ("react-select": "^2.1.1") the React-Select doesn't scroll to make the curent choice visible

we have :
image

we want :
image

@MaxGorshkov
Copy link

The same problem with version 2.4.3

@themre
Copy link

themre commented Jun 4, 2019

i did some investigation and it seems that menuListRef isn't being set. perhaps the issue is that onMenuOpen should be called after menuList has been truly attached to the DOM. maybe this is some race condition issue. maybe we should look at it here:

more bizzare things happen in this codesandbox: https://codesandbox.io/s/x95l82m81q
if I look at chrome debugger, sel1.current is null, but codensandbox console shows HTMLDIvElement. but if I console.log sel1.current, both console shows null.

@themre
Copy link

themre commented Jun 4, 2019

it easier to debug with source :) actually found out that this.focusedOptionRef is not correctly updated. when I select last item, this.focusedOptionRef still points to the first item. in other words, isFocused prop on each option is not correctly recalculated and thus points to first option. I would appreciate some guidance where is this best to fix since there is a lot of logic :)

@MaxGorshkov
Copy link

I solved this problem using handleMenuOpen event and manual scrollIntoView on focused item:

export class View extends React.Component {
    focusedRef: any;

    Option(props: any) {
        return (
            <MenuItem
                ref={(el: any) => {
                    if (props.isSelected && this.focusedRef !== el) {
                        this.focusedRef = el;
                    }
                    if (props.innerRef) {
                        props.innerRef(el);
                    }
                }}
                selected={props.isSelected}
                component='div'
                style={{
                    fontWeight: props.isSelected ? 500 : 400,
                }}
                {...props.innerProps}
            >
                {props.children}
            </MenuItem>
        );
    }

    handleMenuOpen() {
        const thisObject = this;
        setTimeout(() => {
           if (thisObject.focusedRef) {
                thisObject.focusedRef.scrollIntoView();
            }
        }, 100);
    }

    render() {
        const components = {
            Option: this.Option.bind(this),
            ...
        };
        return (
            <Select
                ...
                components={components}
                onMenuOpen={this.handleMenuOpen.bind(this)}
            />
        );
    }
}

@themre
Copy link

themre commented Jun 26, 2019

thanks for this temporary solution! i'll try to find the solution, just didn't have the time to really dig in :(

@ArthurOllier
Copy link
Author

ArthurOllier commented Jun 28, 2019

#3648 will be solved, when the PR (#3652) will pass

@csantos1113
Copy link

Same issue as #3656

@csantos1113
Copy link

Thanks @ankush29 - will be fixed on PR #3652

@bladey
Copy link
Contributor

bladey commented May 28, 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

@bladey bladey closed this as completed May 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants