react-selectにおいて、ドロップダウンを開いた時、選択した項目までスクロールが走らない場合の対処方法

数日間悩んでいたのですが、ようやく原因がわかりました。

NG な例

import * as React from 'react';
import Select from 'react-select';

const options = [
  { label: 'a', value: 'a' },
  { label: 'b', value: 'b' },
  ...,
  { label: 'z', value: 'z' }
];

const App: React.SFC = () => (
  <Select options={options} value={{ label: 'z', value: 'z' }} />
);

export default App;

OK な例

import * as React from 'react';
import Select from 'react-select';

const options = [
  { label: 'a', value: 'a' },
  { label: 'b', value: 'b' },
  ...,
  { label: 'z', value: 'z' }
];

const App: React.SFC = () => (
  <Select options={options} value={options[options.length - 1]} />
);

export default App;

options に渡した props と、同じメモリを参照している value を渡してやれば動きました。

実装してみると、確かに納得。

でも、ちょっと気づきにくいポイントじゃないかなーとも思いました。