Reactで<div>のonKeyDownイベントが実行されない時の対処法

公開日:2019-04-27
最終更新:2019-04-27
※この記事は外部サイト(https://qiita.com/roottool/items/50b8ab5e5...)からのクロス投稿です

TL;DR(要約)

  • <div>をフォーカスを持たせるためには、tabIndex属性を使用する。
  • Tabキーで<div>に到達可能にするならtabIndex={0}、到達不可にするならtabIndex={-1}<div>に追加する。

前書き

私事ですが、Githubが提供しているOSSの Github Desktopコントリビューターになりました
コントリビューターになるために対応したIssue以外にも、Github DesktopのIssuesにて表示中のリストがEscキーを入力しても非表示に切り替わらない不具合が報告されていました。

コントリビューターになりましたが、ボタンのラベルを変えただけだったのでこの不具合の対処も行ってみました

対処法

Github DesktopはReactを使用しています。
そのReactで<div>onKeyDownイベントが実行されないという質問が stackoverflow に投稿されていました。
質問の回答では、tabIndexを使用することで解決すると書かれていたので、実行しました。

...  
        <div  
          className="foldout"  
          style={this.getFoldoutStyle()}  
          tabIndex={-1} // 追加  
          onKeyDown={this.onFoldoutKeyDown}  
        >  
          {this.props.dropdownContentRenderer()}  
        </div>  
...  

実行結果は以下のGIFになります。

原因

<div>は入力要素ではないので、デフォルトではフォーカスを持てないというHTMLの仕様によるものでした。
そのため<div>にフォーカスを持たせるには、<div>に明示的にtabIndexを設定する必要があります。

CodePenに載せました。

後書き

皆さんもOSSのコントリビューターになってみませんか?

Github Help WantedというGithub上で公開されているIssueを検索出来るサイトがあります。
皆さんもhelp wantedタグがついたIssueの解決に貢献して、OSSのコントリビューターになってみてはいかがでしょうか。
各OSSに作成されているIssue内でもgood first issueタグのついたIssueは、対象のOSSに対するIssueに初めて取り組む方向けなIssueになっています。

英語でプルリクエストを書くのは難しそう

小難しい説明はGoogle翻訳で翻訳した英文、翻訳結果の英文を推敲した英文、拙い英文でも大丈夫です。
コードレビューでコードの指摘はあれど、英文については通じたのか指摘された経験はありませんでした。
不安であれば、プルリクエストを作成する対象のOSSに既に作成されているプルリクエストの文章を参考にすると良いと思います。
自分の場合は、プルリクエストの詳細を簡潔に記載している英文があればその言い回しを真似たりしています。(例:This PR fixes ~.)

最後に

Thank you for your patience and cooperation!(あなた方の忍耐と協力に感謝します!)

記事が少しでもいいなと思ったらクラップを送ってみよう!
56
+1
@roottoolの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする