【Ant Design】Selectでブランクオプションを設定する

やりたいこと

Selectコンポーネントでブランクオプションを設定したい．
素朴に実装するならば以下の実装．

const options = [
  {
    key: 'blank',
    value: ' ', // ''とすると選択できない仕様なのでスペースを入れる
  },
  ...
]

基本的にはこれでも良いが，ブランクオプションを選択した場合はフィールドにはブランクオプションのlabelが表示される．
しかし，ブランクオプション選択=未選択として，placeholderを表示したいときはこれでは上手くいかない．

ブランクオプションを設定し，プランクオプション選択時はplaceholderがフィールドに表示されるようにしたい．

環境

• Ant Design 5.16.1

結論

ブランクオプション選択時はSelectのvalueにnullを渡す．

const [selected, setSelected] = useState('blank')

const options = [
  {
    key: 'blank',
    value: ' ',
  },
  ...
]
...

// Select component
<Select
    options={options}
    value={selected === 'blank' ? null : selected}
    onChange={setSelected}
    placeholder='placeholder'
    ...
/>

※valueにnullを渡すことで未選択状態になるが，nullはkeyとして有効な値なのでブランクオプションのkeyにしてしまうと「ブランクオプションを選択している状態」になってしまう．

コメント

ブランクオプションのkeyは他と被ってはいけない．

他のoptionのkeyが，
number ⇒ 脳死でstringの'blank'など
string ⇒ ブランクオプション以外には先頭に'option_'などを付ける
とかにすれば良さそう．