k8o

HTMLDialogElement.requestClose

Firefox 139でHTMLDialogElementのrequestCloseメソッドが実装され、Baseline 2025に仲間入りしました。

requestCloseメソッドは、<dialog>要素を閉じるように要求します。 「要求」と記述した通り、即座にダイアログを閉じるのではなく、cancelイベントを介して、closeイベントを発火させます（既存のcloseメソッドはcloseイベントを呼ぶだけです）。

この時の動作は<dialog>要素を開いた状態で、Escapeキーを押した時と同じです。

cancelイベントをcloseイベントに挟むことで、ダイアログを閉じる前に何らかの処理を行うことができます。

たとえば、cancelイベント中でpreventDefaultメソッドを呼ぶことで、ダイアログを閉じるのをキャンセルすることも可能です。

使用例

下の例は、ダイアログ内のフォームに入力中のテキストがあれば、「閉じる」ボタンやEscapeキーでダイアログを閉じれないように実装しています。

Escapeキーを押した時も同じように動作するはずですが、少なくとも私の環境（Chrome 136）では、cancelイベントが発火した後のEscapeキーの押下では、ダイアログが閉じませんでした（理由は不明）。

returnValue

closeメソッド同様に、requestCloseメソッドの引数に文字列を渡せます。 <dialog>要素のプロパティreturnValueを更新します。

const requestClose = () => {
  dialogElement.requestClose('some value');
};

dialogElement.addEventListener('close', (e) => {
  // requestCloseを呼び出した後であればreturnValueは'some value'になる
  console.log(
    'Dialog closed with returnValue:',
    dialogElement.returnValue,
  );
});

まとめ

requestCloseメソッドの登場により、<dialog>要素はさらにインタラクティブで使いやすくなりました。requestCloseとcancelイベントを活用して、より質の高いダイアログ体験を構築しましょう。