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

react-select does not scroll into view selected option #3769

Closed
Aror opened this issue Sep 21, 2019 · 12 comments
Closed

react-select does not scroll into view selected option #3769

Aror opened this issue Sep 21, 2019 · 12 comments

Comments

@Aror
Copy link

Aror commented Sep 21, 2019

I expect that the following will result in the selected option being shown as soon as the dropdown is opened. It does not. It highlights the selected option but you have to scroll to it in order to see it.

<Select
   options={[...Array(121).keys()].map(num => {return {value: num, label: num}})}
   value={{label: 20, value: 20}}
   isOptionSelected={(option) => (option.value == 20) ? true : false}
 />
@akinorimiz
Copy link

You can use a custom component.

const Option = (props) => {
    const ref = useRef();

    useEffect(() => {
        props.isSelected && ref.current.scrollIntoView();
    }, [props.isSelected]);

    return (
        <components.Option {...props} innerRef={ref} />
    );
};

@andreme
Copy link
Contributor

andreme commented Nov 12, 2019

Duplicate of #3535 and #3648

@harryo
Copy link

harryo commented Dec 17, 2019

You can use a custom component.

const Option = (props) => {
    const ref = useRef();

    useEffect(() => {
        props.isSelected && ref.current.scrollIntoView();
    }, [props.isSelected]);

    return (
        <components.Option {...props} innerRef={ref} />
    );
};

This breaks keyboard navigation. When using arrow keys, the focused option is not visible if too far from the currently selected option.

@harryo
Copy link

harryo commented Dec 18, 2019

The underlying issue is that the focused option is in view, rather than the selected option, and that is correct. But when opening the menu, the selection option should get focus, and hence appear in view. For a fix, see #3813, unfortunately still not merged....

@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
@russyDev
Copy link

russyDev commented Jul 9, 2022

Issue still exist

@ammarsiddique-whizpool
Copy link

Facing same issue, have fixed it like this

create a function onMenuOpen

const onMenuOpen = () => {
setTimeout(()=>{
const selectedEl = document.getElementsByClassName("MyDropdown__option--is-selected")[0];
if(selectedEl){
selectedEl.scrollIntoView({behavior:'smooth', block:'nearest', inline: 'start'});
}
},15);
};

Update the select tag
<Select options={ChapterOptions}
className ={"MyDropdown"}
classNamePrefix={"MyDropdown"}
onMenuOpen={onMenuOpen}
menuPosition={'fixed'}
value={selectedOptionChapter} // Set the selected option using the state variable
placeholder={props.selectedSurah + " - " + props.Surah_name} onChange={(e) => handleChapterChange(e)} />

These are the main things for scrolling itno selected option
className ={"MyDropdown"}
classNamePrefix={"MyDropdown"}
onMenuOpen={onMenuOpen}
menuPosition={'fixed'}

@mikkpokk
Copy link

mikkpokk commented Aug 10, 2023

@ammarsiddique-whizpool Issue only exists if you don't take selected value from your list of options

Use this instead.

<Select
    options={ChapterOptions}
    value={selectedOptionChapter && ChapterOptions.find(option => option.value === selectedOptionChapter?.value)}
    className ={"MyDropdown"}
    classNamePrefix={"MyDropdown"}
    onMenuOpen={onMenuOpen}
    menuPosition={'fixed'}
    placeholder={props.selectedSurah + " - " + props.Surah_name} onChange={(e) => handleChapterChange(e)} />

In case you component receives a lot of other props (causes multiple re-renders) use this:

import {useMemo} from 'react'
// ...

    // Insert it before return
    const chapterValue = useMemo(() => {
        return selectedOptionChapter && ChapterOptions.find(option => option.value === selectedOptionChapter?.value)
    }, [selectedOptionChapter, ChapterOptions])
    // ...
    
    return (
        <Select
            options={ChapterOptions}
            value={chapterValue}
            className ={"MyDropdown"}
            classNamePrefix={"MyDropdown"}
            onMenuOpen={onMenuOpen}
            menuPosition={'fixed'}
            placeholder={props.selectedSurah + " - " + props.Surah_name} onChange={(e) => handleChapterChange(e)} />
    )

@mrudowski
Copy link

Issue only exists if you don't take selected value from your list of options
Yes,

but it also stop working when we add menuPortalTarget={document.body} :(

Please check it here:
https://codesandbox.io/s/codesandboxer-example-forked-c5xp8p?file=/example.tsx

@mikkpokk
Copy link

mikkpokk commented Nov 2, 2023

@mrudowski This is long time ago closed ticket and original ticket does not address menuPortal issue.

Please open new ticket to address the problem and let's see when community is able to address the cause and fixes it.

@mrudowski
Copy link

yes, sorry for that
I've opened new ticket couple of minutes later: #5775

@azuev
Copy link

azuev commented Nov 6, 2023

@ammarsiddique-whizpool Issue only exists if you don't take selected value from your list of options

Use this instead.

<Select
    options={ChapterOptions}
    value={selectedOptionChapter && ChapterOptions.find(option => option.value === selectedOptionChapter?.value)}
    className ={"MyDropdown"}
    classNamePrefix={"MyDropdown"}
    onMenuOpen={onMenuOpen}
    menuPosition={'fixed'}
    placeholder={props.selectedSurah + " - " + props.Surah_name} onChange={(e) => handleChapterChange(e)} />

In case you component receives a lot of other props (causes multiple re-renders) use this:

import {useMemo} from 'react'
// ...

    // Insert it before return
    const chapterValue = useMemo(() => {
        return selectedOptionChapter && ChapterOptions.find(option => option.value === selectedOptionChapter?.value)
    }, [selectedOptionChapter, ChapterOptions])
    // ...
    
    return (
        <Select
            options={ChapterOptions}
            value={chapterValue}
            className ={"MyDropdown"}
            classNamePrefix={"MyDropdown"}
            onMenuOpen={onMenuOpen}
            menuPosition={'fixed'}
            placeholder={props.selectedSurah + " - " + props.Surah_name} onChange={(e) => handleChapterChange(e)} />
    )

not working with react-hook-form :(

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

10 participants