次のようにjQueryUIダイアログの上にさらに、自作のモーダルダイアログを開く時の話です。

f:id:ledsun:20210608015618p:plain — jQueryUIダイアログの上に自作モーダルダイアログを開く

「すでにjQueryUIダイアログを使っているのだから、自作のモーダルダイアログは要らないだろう？」という疑問はその通りだと思います。すでに作成済みの自作モーダルダイアログ使い回したいときだと、考えてください。

このとき自作モーダルダイアログのinput要素またはbutton要素にフォーカスを当てたいです。ところがこれが上手く行きません。 jQueryUIダイアログのフォーカスが奪われます。

https://github.com/jquery/jquery-ui/blob/1.12.1/ui/widgets/dialog.js#L868-L879 の実装を見ると

this._on( this.document, {
  focusin: function( event ) {
    if ( isOpening ) {
      return;
    }

    if ( !this._allowInteraction( event ) ) {
      event.preventDefault();
      this._trackingInstances()[ 0 ]._focusTabbable();
    }
  }
} );

documentのfoucsinイベント監視して、フォーカスを戻しています。しかもやんちゃなことに、キャプチャリングフェーズです。自作のモーダルダイアログ内のフォーカスを当てたいHTML要素のイベントが届く前に、このコードは実行されます。

jQueryUIダイアログの上のモーダルダイアログではフォーカスをとれないのか？というとそんなことはありません。例えばjQueryUIダイアログの上に、jQueryUIダイアログを表示することは可能です。その判定をしているのがthis._allowInteraction( event )です。

https://github.com/jquery/jquery-ui/blob/1.12.1/ui/widgets/dialog.js#L841-L849

_allowInteraction: function( event ) {
  if ( $( event.target ).closest( ".ui-dialog" ).length ) {
    return true;
  }

  // TODO: Remove hack when datepicker implements
  // the .ui-front logic (#8989)
  return !!$( event.target ).closest( ".ui-datepicker" ).length;
},