React Material UIのTextFieldを使用するとplaceholderと入力値が被る現象

最近現場でReactを使うようになって躓いた部分があったので残しておこうと思います。

発生した現象

Material UIのTextFieldコンポーネントを使用して郵便番号欄を作成していました。
スマホ表示時に郵便番号欄をタップした際に、数値のキーボードを初期で表示させたかったのでtype属性をnumberに指定しました。
仕様としてはハイフンなしの半角数値のみが入力される仕様でした。ただtypeをnumberに指定していても半角のハイフンが入力できてしまうようで100-0001のように入力すると以下の画像のようにplaceholderの文字と入力値が被って表示されてしまいました。

<TextField
  type="number"
  label="郵便番号"
/>

入力前

入力後

原因

以下の記事にあるように、途中でハイフンを入れると空文字扱いになってしまうようです。
従ってこの入力欄には何も入力されていないと判定されます。これが原因で入力前の画像と同じようにplaceholderの文字が表示されてしまうことによって、実際には入力されている100-0001と被って見えてしまうということでした。

解決策

他の方法もあると思いますが、今回は以下のうようにして解決しました。

type属性をnumberで指定するのをやめて、新たにinputmodeを追加することで解決しました。
今回躓いて調べるまでinputmodeという属性があることを知りませんでした。
inputmode属性とは、簡単にいうとソフトウェアキーボードの挙動を制御するための属性です。

キーボードを制御したかったのでtypeをnumberに指定していましたが、今回適しているのはinputmodeでしたのでこちらを追加することにしました。

Material UIのTextFieldコンポーネントを使用していたので、そのままinputmode属性を使用することができませんでした。
TextFieldコンポーネントにinputmode属性を追加するには以下のようにすることで指定する事ができました。

<TextField
  inputProps={{ inputMode: 'numeric' }}
  label="郵便番号"
/>

このようにして解決する事が出来ました！