React-select: 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 https://github.com/JedWatson/react-select/pull/3652/commits/bb9c1d7bf53a68aa6bd4e6be5c40c3b0c14a7c01

[csantos1113]

Same issue as https://github.com/JedWatson/react-select/issues/3656

[csantos1113]

Thanks @ankush29 - will be fixed on PR https://github.com/JedWatson/react-select/pull/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 https://github.com/JedWatson/react-select/pull/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:

https://github.com/JedWatson/react-select/blob/d78730377e25658a5df2930faee54574e757d463/packages/react-select/src/Select.js#L503-L506

https://github.com/JedWatson/react-select/blob/d78730377e25658a5df2930faee54574e757d463/packages/react-select/src/Select.js#L802

[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