今更HTML5のbuttonに１時間悩まされた話

結論

<button type="button" class="XXX">XXX</button>

上記のtype="button"を記述してなかっただけでした。
本当にしょうもない・・・・泣

後１時間は盛りました。そんなにかかってません気持ちはそれくらい詰まった気でいますが・・・・

前提

今回開発していたのは単純にリストを表示するような画面になります。

見た感じの構成は以下のようになってます。
・項目追加ボタン
・検索フォーム
・検索ボタン
・リスト

項目追加ボタン押下で小画面表示され項目追加用のフォームと追加ボタンが表示されます。

検索フォームに半角数字しか入れられない制限を実装してます。
具体的には検索ボタンを押下した際エラーチェックで問題があればalert()を表示し対象の検索フォームにfocus()します。更にblur拾って自動でトリミングや変換を行ってくれます。
（要は全角数字入れたら怒られて半角に自動で変えてくれるってことです）

但し、Enter押下でも検索が反応するようにしています。（今回の問題）

症状

上記で紹介した検索フォームに全角数字を入れて検索ボタンを押下したパターンでは
検索ボタンのイベントが動く前にblurでフォームの中身が自動変換されるのでそもそもエラーにならない。
しかし、フォームに全角数字を入力しフォーカスアウトさせる前にキーボードのEnterを押してしまうと変換される前なのでエラーのalert()が表示されます。

ここまでは全く問題なく仕様通りではあります。

このalert()ダイアログの”OK”を押すと項目追加の小画面が開くという現象に見舞われました。

本来は単にリストに検索条件が反映されるだけの仕様なんですよ・・・・泣
「なんじゃこりゃ・・・」

解決まで

とりあえず小画面表示用、それも項目追加を指定している関数が使われている箇所を調査
(ex. submitByAction('listAdd'); )
-> 特におかしなところはない。

何度か検索フォームに全角数字を入力してEnterを押すという動作を再現性があるかも含めて行っていた時に直感で何となく項目追加ボタンが押された時の挙動をしている様に感じた。

・なので項目追加ボタンがEnterによって反応していないか？
・tabindex="-1"を追加してみる
・actionとかtargetとかその辺りの記載でやらかしてないか？
・実際にalert()の前後でtarget,method,actionの値どうなってんの？

上記みたいなことを試したり他にも色々試して見たけどダメだった・・・。
なんで？わいこんなHTMLとかJSで詰まらなあかんねん！みたいなことを思いつつ再度さっきの直感のことを思考しました。

仮にボタンがなんかしらの事象によって反応しているとすればその過程のログは取れるはずなので
class指定でclickイベントを拾ってる所と小画面表示関数の中にログを仕込んで見ました。
-> やっぱりログ取れた！！

ここで何か知らんけど項目追加ボタン反応しとる！！しかも"click"で!!
ということが分かり項目追加ボタン周辺を見てると結論の通りtype="button"が抜けてるというしょうもない話でした。

<input type="button">

これの派生なら普通に何も指定してない時は何もしないでくれよ・・・・（ワガママ）
ちなみに初期値はsubmitを指定した時の挙動になります。

反省

今回”やっぱここ課題だな”と思った所は直感を正確に自分の中に落とし込む部分の弱さです。
直感自体は結構当たる。（直感マジ大事！！）

けれども上記の直感で得た直後のアプローチは直感を直接的に裏付けるものになっていないため無駄な時間を浪費する結果に繋がったのだと思う。
勿論できそうな所からやるというのも間違ったアプローチではないものの今回みたいなパターンでは横着せずそのタイミングで正確に情報整理をしないといけない。
具体的な情報整理の方法はいつもの書き出しでどうにかなる。（これはそのうちどこかで書きます）

結局めんどくさがるのが一番あかんということですわ。
皆様お気を付け下さい。