Material UI の Dialog 内のコンポーネントで Returnキーが押されたらDialogを閉じる。

TL;DR

今現在、業務で関わっているSPA開発で Material UIを多用しており、 Dialog を使うところもありそうなので、使い方を調べがてら主題のスパイクを行ったので共有します。

目的

公式ドキュメントにあるサンプル

• Simple Dialogs

をもとにして、以下の AS IS: から TO BE: になるように手を入れました。

AS IS：

以下のダイアログ

が開いたときに、元のサンプルでは、メールアドレスや "add account" の各<ListItem> でマウスがクリックされたら、それが選ばれてダイアログが閉じるようになっている。

TO BE：

各 <ListItem> の上にマウスが乗っている状態で Returnキーが押されたら、それが選ばれて、ダイアログが閉じるようにする。

作ったもの

いちおう、 TO BE になるような修正ができたので、以下に上げました。

• https://github.com/jun68ykt/dialog-spike

create-react-app で作ったアプリのひな形をもとに作成しました。以下にて動かすことができます。

• git clone [e-mail]:jun68ykt/dialog-spike.git
• cd dialog-spike
• yarn install
• yarn start

元のサンプルコードから手を入れた部分は以下です。

• Dialog closed onKeyDown of CR(13) key on ItemList

より良い方法があれば

より良い方法があれば是非ご教示ください。