-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Comments
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. |
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.... |
Hello - In an effort to sustain the 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 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! |
Issue still exist |
Facing same issue, have fixed it like this create a function onMenuOpen const onMenuOpen = () => { Update the select tag These are the main things for scrolling itno selected option |
@ammarsiddique-whizpool Issue only exists if you don't take selected 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)} />
) |
but it also stop working when we add Please check it here: |
@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. |
yes, sorry for that |
not working with react-hook-form :( |
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.
The text was updated successfully, but these errors were encountered: