Not scrolling to the selected group option on menu open

[ColbySong]

react-select: 3.0.4

After selecting a value and then re-opening the menu, the component does not scroll the selected value into view.

This behaviour occurs for both standard options and also the new options with group headers.

Options with group header issue:
https://codesandbox.io/s/p68rh?module=/example.js

• select an option far down the list
• re-open menu, selected element is highlighted but not scrolled into view when menu is opened

Standard options:
https://codesandbox.io/s/kwv9t?module=/example.js

• select option 'silver' which is far down the list
• re-open menu and you will see the view does not scroll to the selected value

similar issue reported by #3535 for custom options as well

[ankush29]

solved bb9c1d7

[csantos1113]

Same issue as #3656

[csantos1113]

Thanks @ankush29 - will be fixed on PR #3652

[imnikij]

Hey @csantos1113 I see this issue as still an open one, any idea by when this will be fixed ? I am using [email protected] and still get same error

[tonistenno]

Really waiting for this fix

[alexmnv]

Scrolling to the selected option is broken in v3 only (tested on 3.0.4 and 3.0.8), v2 seems to be working correctly. The patch suggested by @ankush29 fixes the problem. But there can be another type of problem I ran into. I'm posting it here in case it might help someone:

The problem turned out to be that the option object passed to value prop was not the same object present in options array, and react-select uses strict equality comparison (options.indexOf) to find selected option. E.g.:

<Select
  options={options}
  
  // wrong: new object is created. `options.indexOf(value)` fails to find the option index
  value={{
    value: selectedId,
    label: selectedName
  }}
/>

<Select
  options={options}
  
  // correct: `value` can be found in `options` array
  value={options[selectedIndex]}
/>

[milosh86]

This issue is introduced in 3.0.4 release, probably #3569 caused it.

[Hodor9898]

I am having the same issue

[TBear79]

Yes. I also have the same issue. I'm using objects with same reference as value but it doesn't seem to be working. When is this going to be fixed?

[AnthonyCrowcroft]

any expected date for a fix for this looking back at 3.0.3 bug still seems to be present for me.

[DominicFath]

We are on version 3.0.8 and this bug is still occurring. Would be much appreciated if this could be solved as quickly as possible since it is quite an obvious front facing issue.

[carlosriveroib]

Please, any updates on this?

[konsvarl]

Guys, any updates ? +

[vthai]

Is this going to be fixed in the next release?

[maidinhkhoa92]

I tried my self to fix issue.
Following this commit.

solved bb9c1d7

in src/select.js
openMenu functionality:
`openMenu(focusOption: 'first' | 'last') {
const { menuOptions, selectValue, isFocused } = this.state;
const { isMulti } = this.props;
let openAtIndex =
focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;

if (!isMulti) {
  const selectedIndex = this.props.options.indexOf(selectValue[0]);
  if (selectedIndex > -1) {
    openAtIndex = selectedIndex;
  }
}

// only scroll if the menu isn't already open
this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
this.inputIsHiddenAfterUpdate = false;
this.onMenuOpen();
this.setState({
  focusedValue: null,
  focusedOption: this.props.options[openAtIndex],
});

this.announceAriaLiveContext({ event: 'menu' });

}`

getNextFocusedOption functionality:

getNextFocusedOption(options: OptionsType) { const { selectValue: lastFocusedOption } = this.state; const { options : menuOptions } = this.props; return lastFocusedOption && menuOptions.indexOf(lastFocusedOption[0]) > -1 ? lastFocusedOption[0] : options[0]; }

[matyas-igor]

Worked for me pretty well with defining custom onMenuOpen prop:

import React, { useCallback, useRef } from 'react'
import Select from 'react-select'

const MySelect = ({ isMulti, onMenuOpen: onMenuOpenProp, ...props }) => {
  const selectRef = useRef(null)

  // Feature of focusing selected option when menu is getting opened
  const onMenuOpen = useCallback(() => {
    // Calling an initial prop if it has been passed
    onMenuOpenProp?.()
    if (!isMulti) {
      // Getting a selected option
      const option = selectRef.current?.select?.state?.selectValue?.[0]
      if (option) {
        setTimeout(() => {
          // Setting a focused value as a selected one
          // References:
          // - https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js#L503
          // - https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js#L802
          if (selectRef.current?.select) {
            const selectedIndex = selectRef.current.select.state.menuOptions.focusable.indexOf(option)
            if (selectedIndex >= 0) {
              // Focusing selected option only if it exists
              selectRef.current.select.scrollToFocusedOptionOnUpdate = true
              selectRef.current.select.inputIsHiddenAfterUpdate = false
              selectRef.current.select.setState({
                focusedValue: null,
                focusedOption: option,
              })
            }
          }
        })
      }
    }
  }, [selectRef.current, onMenuOpenProp, isMulti])

  return <Select ref={selectRef} isMulti={isMulti} onMenuOpen={onMenuOpen} {...props} />
}

Hope it'll help someone as well 🙏🏻

[soulmerge]

Can confirm that the above work-around works in version 3.0.8.
Here are canonical versions of the URLs in the comments of the snippet above:

react-select/packages/react-select/src/Select.js

Lines 503 to 506 in d787303

	this.setState({
	focusedValue: null,
	focusedOption: menuOptions.focusable[openAtIndex],
	});

react-select/packages/react-select/src/Select.js

Line 802 in d787303

const index = menuOptions.focusable.indexOf(focusedOption);

[nielskrijger]

This issue was fixed for me in 3.1.0

[bladey]

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!

[peterp]

@bladey I think this should be re-opened, I'm using option groups, and it's not scrolling to the selected element.

Update: This seem to be caused by using custom components.

[bladey]

Thanks @peterp.

[ebonow]

Greetings, I can replicate the issue as well with the following criteria with or without custom components.

<Select 
isMulti 
hideSelectedOptions={false} 
options={groups} 
/>

https://codesandbox.io/s/react-select-bug-scroll-selected-group-option-k9942?file=/src/App.js

[louisptremblay]

Adding a setTimeout to /node_modules/react-select/dist/Select-#####.browser.esm.js seems to fix it for me (4.1.0)
ie. change:

scrollIntoView(this.menuListRef, this.focusedOptionRef);

to:

 setTimeout(() => scrollIntoView(this.menuListRef, this.focusedOptionRef), 0);

[raphaelaleixo]

Any idea if this bug will be fixed soon? @louisptremblay , have you submitted a pull request with your fix?

[louisptremblay]

PR submitted... you can use yarn patch-package in the meantime

[mhammadsiddiqui]

So I was able to solve this using onMenuOpen() call back function with timeOut() function as we do not have "MyDropdown__option--is-selected" class at the time when this function is invoked.

My solution is as follows;

//when dropdown is not manually clicked then it does not scroll into view
onMenuOpen = () => {
  setTimeout(()=>{
    const selectedEl = document.getElementsByClassName("MyDropdown__option--is-selected")[0];
    if(selectedEl){
      selectedEl.scrollIntoView({behavior:'smooth', block:'nearest', inline: 'start'});
    }
  },15);
};

render(){
const {defaultOption, options} = this.props;

  return (
    <Select 
      options={options}
      value={defaultOption}
      onMenuOpen={this.onMenuOpen}
      onChange={(item: IDropdownOptions) => this.props.onSelect(item)}
      >
    </Select>
  );
}

[ebonow]

Greetings all,

Merge conflicts have been resolved and version 4.3 has been released as we wanted to squeeze in at least one more release before the conversion to TypeScript.

One of the changes that was added was that the focusedOption is now passed as a prop to the MenuList component so hopefully this makes it easier to find the option to be scrolled to if using a custom component. This does not resolve the core issue, but may give some ideas for work arounds for the time being.

More to come, but wanted to at least give an update that there are eyes on this.

[railsonsousa106]

Doesn't work at all for me on version 4.3!
Can you please provide me any code snippet that works?

[burzacoding]

It's still not working for me, any solution?

[slaurent22]

Not working for me on 5.0.0. Are there any code snippets for workarounds?

[mhammadsiddiqui]

Here is my the solution, what worked for me : https://stackoverflow.com/a/66710895/7844963

[slaurent22]

Here is my the solution, what worked for me : https://stackoverflow.com/a/66710895/7844963

Thanks so much! I had tried mhammadsiddiqui's solution above, which is similar, but omits the className and classNamePrefix part

[StothekMonster]

Is a fix for this issue scheduled, it's 4 years old?