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

2019-02-03

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

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 を渡してやれば動きました。

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

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

© 2018 kk-web