ag-Gird：FloatingFilterの話Part2(Tab遷移を制御できなかった話)


#〇このノートのきっかけ

会社で[ag-Grid](https://www.ag-grid.com/)を使っています。

いろんな機能が簡潔なコードで実装できる優秀グリッドです。具体的にどんな事が出来るのか、[コチラのページ](http://www.moongift.jp/2017/03/ag-grid-%E6%A5%AD%E5%8B%99%E8%A6%81%E4%BB%B6%E3%81%AE%E6%AE%86%E3%81%A9%E3%82%92%E6%BA%80%E3%81%9F%E3%81%9B%E3%81%9D%E3%81%86%E3%81%AA%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%A9%E3%82%A4%E3%83%96/)がとても分かりやすく説明されています。

しかし、日本語で説明したサイトは少ないです。紹介しているサイトはありますが、具体的な実装や使い方に踏み込んだサイトとなるとほぼ皆無かと、、、、英語の[公式チュートリアル](https://www.ag-grid.com/)を辛抱強く読むしかありません、、、、いやだ、、、、、。

そこで公式チュートリアルを読みつつ、実際に使ってみて理解した事を備忘録的に書きます。

今回は[FloatingFilter](https://www.ag-grid.com/javascript-grid-floating-filter-component/#gsc.tab=0)の第二弾です

<img width="688" alt="ﾁｭｰﾄﾘｱﾙ1.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/671b8a3d-d682-69b9-a781-b7711cdc63bc.png">

カラム毎にフィルターが表示され、含む、含まない、以上、以下、等しい、等しくないなど条件を変更して検索できる便利な機能です。エクセルのフィルタ検索みたいなイメージですね！

実装のコードは[第一弾](https://qiita.com/tikchiku/items/fb9903b478a86a3d9a09)を参考ください。

#〇やりたい事、と読み進める上での前提

これまでは検索条件をTypeScriptで実装していました。

<img width="555" alt="検索条件1.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/34457646-cbb2-5a5c-e531-c2ef735cb6ce.png">

けれども出来れば、エクセルみたいな検索フィルターの方がいいですよねえ、、、という訳でFloatingFilterを実装しました。

<img width="927" alt="FIlter作った1.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/4208618b-c6d6-975e-425b-8770a27aff6b.png">

フィルターに色付けたり、角を丸めたり、少しいじっています。詳しくは[第一弾](https://qiita.com/tikchiku/items/fb9903b478a86a3d9a09)へ！

さて、「これで使いやすくなっただろう！」と意気揚々とテストをお願いしたところ、衝撃のコメントが、、、、、

*「カラムを並び替えた上で、フィルターにカーソルを合わせてTabキーを押しても、左から右に遷移してくれません」*

何を見つけてくれたのか、整理します。

**①カラムを並び替えた上で
②フィルターにカーソルを合わせて
③Tabキーを押しても、左から右へ遷移してくれない**

**①カラムを並び替えた上で**
ag-Gridはドラッグ&ドロップでカラムの位置を変えることが出来ます

<img width="911" alt="並び替える.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/fc8320a1-529f-0677-72be-ceb61a0ef488.png">

ひとつ前のグリッドから、2列目：「出荷指示」と3列目：「出荷保留」を並び替え、4列目：「出荷番号」と5列目：「受注番号」を替えようとしています

**②フィルターにカーソルを合わせて**
例えば2行目：「出荷保留」のフィルターにカーソルを合わせます

<img width="897" alt="並び替える2.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/5c3cf6f9-9eee-963d-320a-f79cb088bd75.png">


**③Tabキーを押しても、左から右へ遷移してくれない**
ここでキーボードのTabキーを押してみます、3行目：「出荷指示」のフィルターへ飛べばいいのですが、、、

<img width="894" alt="並び替える3.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/f9ce3662-8be8-8155-5019-bacf425abf4a.png">


残念！！4行目のフィルターに飛んでしまっています。

画像だと分かりにくいですが、実際に3行目のフィルターをスキップして4行目に行ってしまうんですね、、、、。

つまり、**カラムを並び替えてもTabキーのキーボード処理に変更が伝わっていない**。じゃあTabを何の順番で遷移するのかというと、、、、

<img width="396" alt="Tab順番.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/fc74f526-7dcf-1bcf-9ea6-6ea993145f49.png">

***コードで書いた順番***、、、、、、。

どんなにカラムを並び替えても、Tabキーはコード順で遷移するみたいです、、、、、。テストされた方、すごいですよね、、、、、「Tabキーで順番に遷移するかな」と考えるなんて、細かいと言いますかユーザー目線が徹底されているといいますか、、、。

で、どうすれば解決できるか調べてみましたが。公式チュートリアルの[KeyNavigation](https://www.ag-grid.com/javascript-grid-keyboard-navigation/#gsc.tab=0)には明記書かれていません。

<img width="825" alt="KEyNavigation.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/208dc64b-7f2e-48ba-84c7-327a704941bc.png">


それなら、困った時のStockOverFlow!!
速い時は10分もかからず誰かが答えをくれます。

<img width="831" alt="StockOverFLow.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/ba9992e8-c551-69e6-13a9-41a406119262.png">

反応ありません。というかView少な！！
ag-Grid、関心もたれていないのか？私の質問が下手すぎるのか(写真とか貼るべきでしたかね、、、)

最終手段、[ag-Gridのgithub](https://github.com/ag-grid/ag-grid/)にQA的にぶつけてみました。

<img width="719" alt="GitHub.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/4ccc237e-3d5b-8db8-e657-83dfd6df2b60.png">

これもまさかのスルー。開発者も答えてくれないという事はまさかこれ、、、、、感じていらっしゃるかとかもしれませんが、このTabキー問題、***解決できませんでした***。

解決策を見いだせず。

とは言え、解決できずとも惜しいところまでは行きましたので、その悪あがきプロセスはまた時間ある時にPart3として書くことにします。