Fomantic UI の Form ValidationでonFailureでのfocus移動は、注意が必要

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;
  },

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.