React Select でメニューをスクロール位置に応じていいかんじに表示させる

React 製のセレクトコンポーネントライブラリとして有名な react-select。
便利で使いやすい一方、標準の <select> タグと挙動が少し違っており、以下のような困りごとが発生しました。

標準の <select> タグは、下方向に十分なスペースがない場合、自動的に上方向にドロップダウンメニューが表示されます。
しかし、react-select はデフォルトで、スクロール位置などに関係なく下方向にドロップダウンが描画されてしまうため、画面下端に突き抜けてしまいます。

そこで、HTML 標準の <select> のように、下部スペースがない場合は上部にドロップダウンを表示する設定の方法を調べました。

結論としては、以下の 2 つを指定することで、スクロール位置に応じて自動的に上下が切り替わるようになります。

import Select from 'react-select';

<Select
  ...
  menuPortalTarget={document.body}
  menuPosition="fixed"
  ...
/>

注意点としてはモーダルなどを扱っている場合、z-index の兼ね合いでドロップダウンメニューが、モーダルの背面に隠れてしまうことがあります。

ドロップダウンがモーダルなどの下に隠れてしまう場合は、styles プロパティを使ってドロップダウンメニューに明示的な z-index を指定することで解決できます。

<Select
  ...
  menuPortalTarget={document.body}
  menuPosition="fixed"
  styles={{
    menuPortal: (base) => ({ ...base, zIndex: 9999 })
  }}
/>