Bootbox4.x.xで初期表示時にフォーカスがあたるボタンを変更する

状況

Bootstrap用のモーダルダイアログライブラリbootboxで確認ダイアログを表示するコードを書いていたのだが、初期表示ではOKボタンにフォーカスがあたっているのをキャンセルボタンにフォーカスがあたるよう変更してほしいという要望があった。

削除確認に使うダイアログなので、単純にリターンキーを押したら削除が実行されるのはまずいということだそうな。

bootboxで確認ダイアログを出すコード

var confirm = bootbox.confirm("削除します。よろしいですか？", function(result) {
    // OKならtrueに、Cancelならfalseになります
    if (result){
        console.log('OK');
    }
});

この通りconfirmメソッドを呼んでいるだけである。
bootboxのサンプルやドキュメントを見ても確認ダイアログでデフォルトのフォーカスを変更するオプションはないようだ。¹

そこでbootbox.jsを読むと、初期表示時のフォーカスは以下のコードで当てていることがわかった。

    dialog.on("shown.bs.modal", function() {
      dialog.find(".btn-primary:first").focus();
    });

つまりダイアログのボタンで一番最初にbtn-primaryのクラスが指定されているところにフォーカスがあたるのである。

よって確認ダイアログをconfrimメソッドではなくカスタムダイアログで表示するようにした。

カスタムダイアログで書き直したコード

bootbox.dialog({
　　message: "削除します。よろしいですか？",
    title: "サンプル",
    buttons: {
        main: {
	     label: "削除しない",
             className: "btn-primary",
                 callback: function() {
                     console.log("削除しない");
                 }
             },
             danger: {
                 label: "削除する",
                 className: "btn-danger",
                 callback: function() {
                      console.log("削除する");
             }
       }
   }
});

これで単にリターンキーを押した場合は「削除しない」ボタンにフォーカスがあたっているので、「削除しない」ボタンが押された場合の動作をするようになった。

1. Change default focus for Confirm buttons?あたりの議論を読み返すとできるようになったと思えるのだがいまいちはっきりしない。 ↩