jQuery UI 1.14対応: 非推奨の`dialogClass`を`classes`に移行

2026年03月25日 06:07 JST activeadmin/activeadmin

https://github.com/activeadmin/activeadmin/pull/8978

jQuery UI 1.14でデフォルト無効化されたdialogClassオプションへの依存を解消するため、ダイアログへのカスタムクラス付与を非推奨でないclassesオプションに移行しました。これにより、バッチアクションの確認ダイアログに意図しないクローズボタンが表示される不具合が修正されます。

背景

jQuery UIのバージョンアップが、バッチアクション確認ダイアログのレイアウト崩れを引き起こしていました。

jQuery UI 1.14では $.uiBackCompat がデフォルトでfalseに変更されました。これにより後方互換レイヤーが無効化され、非推奨オプションである dialogClass が機能しなくなっています。ActiveAdminはこのdialogClassを使ってダイアログラッパーにactive_admin_dialogクラスを付与し、タイトルバーのクローズボタンを非表示にするCSSセレクタ（.active_admin_dialog .ui-dialog-titlebar-close）を機能させていました。

#8977として報告されたこの不具合では、dialogClassが無効化された結果、active_admin_dialogクラスが付与されなくなり、クローズボタンを隠すCSSが効かなくなっていました。本PRはその根本原因を解消するものです。

技術的な変更

dialogClassの使用箇所2ファイルを、jQuery UI公式が推奨する classes オプションに置き換えました。

classesオプションはウィジェットの各要素に対してキーと値のマッピングでクラスを指定するAPIです。ダイアログのラッパー要素に対応するキーは"ui-dialog"であり、そこに"active_admin_dialog"を割り当てることで従来と同じクラス付与を実現します。

変更前後の対比（app/assets/javascripts/active_admin/base.js）:

変更前:

dialogClass: "active_admin_dialog",

変更後:

classes: {
  "ui-dialog": "active_admin_dialog"
},

変更前後の対比（app/javascript/active_admin/lib/modal-dialog.js）:

変更前:

dialogClass: 'active_admin_dialog',

変更後:

classes: { 'ui-dialog': 'active_admin_dialog' },

変更はいずれもオプション定義の1行置換であり、ダイアログの動作ロジックには一切手を加えていません。

設計判断

CSSセレクタやダイアログの制御ロジックを変更せず、オプションのキー名の切り替えのみで修正を完結させる最小変更のアプローチが採られました。

classesオプションはdialogClassの後継にあたる正式APIであり、"ui-dialog"というキーはjQuery UIが内部的に管理するウィジェット要素名です。この指定によって生成されるDOMの構造は変わらず、active_admin_dialogクラスは従来と同じ要素に付与されます。そのため、既存のCSSセレクタはそのまま機能します。

最小限の変更でAPIの移行を完結させることで、既存の仕組みへの影響を抑えつつ、将来のjQuery UIのバージョンアップにも耐性を持たせる判断といえます。

まとめ

jQuery UI 1.14での後方互換レイヤーの無効化によって露見したdialogClassへの依存を、正式APIclassesへの1行置換で解消した修正です。最小限のコード変更でCSSセレクタを含む既存の仕組みをそのまま活かし、バッチアクション確認ダイアログの表示崩れを根本から修正しています。