MUI の NativeSelect コンポーネントについて

はじめに

MUI を触っていたら、以下のようなコードを見かけました。

<Select native>
  <option value="1">1</option>
  <option value="2">2</option>
</Select>

「この native ってなんだろう？」と思ったので、調べたことをまとめたいと思います。

MUI の NativeSelect コンポーネントについて

調べてみると、MUI の Select には「Select コンポーネント」と「NativeSelect コンポーネント」の2種類があり、今回見かけた <Select native /> は NativeSelect コンポーネントということがわかりました。

この記事ではその違いを、公式ドキュメントを引用しつつ整理します。

言葉の整理

用語	意味
Select コンポーネント	<Select /> のこと
NativeSelect コンポーネント	<Select native /> または <NativeSelect /> のこと

コンポーネントの違いについて

公式ドキュメントで Select コンポーネントの箇所には以下の記載があります。

When native is true, the component uses a native <select> element.

これを読むと、 NativeSelect コンポーネントは <select> を使っていることがわかります。それは逆にいうと、Select コンポーネントでは <select> が使われてないことを示しています。

実際に開発者ツールで確認してみると、NativeSelect コンポーネントは <select> が使われており、Select コンポーネントは <select> が使われていないことがわかります。

また、NativeSelect コンポーネントの公式ドキュメントには次の記述があります。

value

The input value. The DOM API casts this to a string.

これは value が string に変換されるということです。

まとめると、

• NativeSelect：boolean や number を渡しても string に変換される
• Select：渡した型がそのまま返ってくる

コード例でみる違い

Select コンポーネント

<Select
  value={value}
  onChange={(e) => {
    console.log(e.target.value, typeof e.target.value);
  }}
>
  <MenuItem value={1}>1</MenuItem>
  <MenuItem value={2}>2</MenuItem>
</Select>

実行結果

1 number

NativeSelect コンポーネント

<Select
  native
  value={value}
  onChange={(e) => {
    console.log(e.target.value, typeof e.target.value);
  }}
>
  <option value={1}>1</option>
  <option value={2}>2</option>
</Select>

実行結果

1 string

さいごに

<Select native> というコードを見たのがきっかけで調べましたが、Select コンポーネントと NativeSelect コンポーネントは見た目が似ていても中身は別物だと感じました。

value の型の扱いが異なるので、使用する際は気をつけようと思いました。