Fomantic UI の Form ValidationでonFailureでのfocus移動は、注意が必要
2020/02/21
2020/02/24
keyboardShortcuts が有効の時、onFailure のcallback内で、focus移動は、問題が起こる場合があります。
validateエラーがあった時に、最初のエラーになった入力項目にfocus移動をする、というのは、普通によくある動作と思います。
その時に、以下のように直にfocus移動してしまうと、その後submitボタンが効かなくなる場合があります。 具体的には、ある入力項目にフォーカスがある時、Enterキーでformのsubmitを発生させて、validateエラーが発生して、onFailureが呼ばれた時に、focus()を実行して別の入力項目に移動した場合です。
onFailure: function(erros, field) { var errorFields = $('.field.error input,.field.error select', this); errorFields.first().focus(); return false; }, |
これは、Fomantic UIで、Enterキーを押しっぱなしにした場合、ブラウザがsubmitを複数回呼び出すのを防御するため、キー押し中という状態を保持する変数があるんですが、focusで移動してしまうと、その変数をクリアできなくなり、キー押し中と判定されたままとなり、submitボタンが効かなくなるようです。
うまいこと、Fomantic UI側の修正方法がひらめけば、Pull Requestしたいんですが、ひらめかない。
とりあえず、利用者側でこの現象を回避するには、setTimeoutを使ってfocus移動のタイミングをずらしてあげるというのがよさそうです。
onFailure: function(erros, field) { var errorFields = $('.field.error input,.field.error select', this); setTimeout(function(){ errorFields.first().focus(); }, 100); return false; }, |