k8o

はじめに

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

requestCloseメソッドは、<dialog>要素を閉じるように要求します。

要求とは、どういうことでしょうか。この記事では、requestCloseメソッドの詳細と使用例について解説します。

HTMLDialogElement.requestClose

HTMLDialogElement.requestCloseメソッドは<dialog>要素を閉じます。 それに対し、HTMLDialogElement.requestCloseメソッドは<dialog>要素を閉じるように要求します。

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

<dialog>要素を開いた状態でEscapeキーを押した時は、requestCloseメソッドを実行した時と同じような処理になります。

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

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

使用例

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

Escapeキーを押した時も同じように動作するはずですが、テキストがある状態でEscapeキーを2回押下するとダイアログが閉じてしまいました（Chrome 141）。

returnValue

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

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

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

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

おわりに

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