TL;DR
今現在、業務で関わっているSPA開発で Material UIを多用しており、 Dialog を使うところもありそうなので、使い方を調べがてら主題のスパイクを行ったので共有します。
目的
公式ドキュメントにあるサンプル
をもとにして、以下の AS IS: から TO BE: になるように手を入れました。
AS IS：
以下のダイアログ
が開いたときに、元のサンプルでは、メールアドレスや "add account" の各<ListItem> でマウスがクリックされたら、それが選ばれてダイアログが閉じるようになっている。
TO BE：
各 <ListItem> の上にマウスが乗っている状態で Returnキーが押されたら、それが選ばれて、ダイアログが閉じるようにする。
作ったもの
いちおう、 TO BE になるような修正ができたので、以下に上げました。
create-react-app で作ったアプリのひな形をもとに作成しました。以下にて動かすことができます。
- git clone git@github.com:jun68ykt/dialog-spike.git
- cd dialog-spike
- yarn install
- yarn start
元のサンプルコードから手を入れた部分は以下です。
より良い方法があれば
より良い方法があれば是非ご教示ください。