React-select: Scrolling with arrow-keys is not working correctly

[Frezzaldo]

I have upgraded from beta14 to rc1 version and now scrolling with the up/down arrow-keys is not working correctly anymore. The list is not scrolled when you get below what you see. You can actually see this in the first example on the demo-page.

[piecyk]

so after quick look on this, the this.focused is not set correctly
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L214

at commit https://github.com/JedWatson/react-select/commit/3cef09da73c5111713270b5b54e506e878ba4c8c with ref callback

it is still set as string https://github.com/JedWatson/react-select/blob/master/src/utils/defaultMenuRenderer.js#L22

for quick fix, replace this.focused with this.refs.focused

[hanshenrik]

I'm having the same issue when using a custom optionComponent. Using RC5. My custom option component looks like this:

const CustomOption = ({ className, isDisabled, isFocused, isSelected, onFocus, onSelect, option }) => {
  const classNames = [className];
  if (isFocused) classNames.push('is-focused');
  if (isSelected) classNames.push('is-selected');
  if (isDisabled) classNames.push('is-disabled');
  return (
    <div
      className={classNames.join(' ')}
      onClick={() => onSelect(option)}
      onMouseOver={() => onFocus(option)}
    >
      <Flag name={option.flag)} />
      {option.name}
    </div>
  );
};

Am I missing an onX method implementation? onMouseMove={() => onFocus(option)} doesn't help.

EDIT: Switching to using optionRenderer instead of optionComponent is a workaround. Much simpler code as well:

renderCustomOption = option => (
  <div>
    <Flag name={option.flag)} />
    {option.name}
  </div>
);

[nicolasazrak]

If it helps anybody I discovered that in my case it wasn't working because valueKey was missing, the options I used had id but not value. So using <SelectAsync valueKey='id' /> made the trick

[CreepGin]

@nicolasazrak Thanks! Setting valueKey solved the issue for me.

[kylesuss]

Another possible issue some people might be having:

I was using a custom optionComponent and the component I provided was originally a stateless functional component. Through some digging, I noticed that the ref to the component was missing when focusAdjacentOption was being called:

https://github.com/JedWatson/react-select/blob/c9d027387a77b3695fdfbb3d4de25ffcea9505ee/src/Select.js#L729

Since stateless functional components don't have refs, the component ref to my custom optionComponent was not being passed around correctly. I fixed the issue by extending React.Component instead of using a stateless functional component for my optionComponent. Now scrolling works 👌 when using the arrow keys.