【Chakra V3】ダイアログ（モーダル）を閉じるイベントを検知する

はじめに

Chakra V3のモーダルを使用していて、モーダルが閉じる直前に処理を挟み込みたかったので、閉じるイベントを検知する方法を備忘として記事にします。

問題

公式ページから閉じるイベントを検知する方法が見つかりませんでした。

解決方法

DialogRootコンポーネントのonOpenChangeから検知できます。

現状は親コンポーネントのconst { open, setOpen, onToggle } = useDisclosure();から取得したonToggleをセットしているので、モーダルの開閉しか置きません。

修正前

import {
  DialogCloseTrigger,
  DialogContent,
  DialogRoot,
  DialogTitle,
} from "@/components/ui/dialog";

const InputModal: FC<Props> = ({
  open,
  onToggle,
}) => {
  // 省略

  return (
    <DialogRoot size={"sm"} open={open} onOpenChange={onToggle}>
      {/*省略*/}
    </DialogRoot>
  );
};

修正後

import {
  DialogCloseTrigger,
  DialogContent,
  DialogRoot,
  DialogTitle,
} from "@/components/ui/dialog";
+ import type { OpenChangeDetails } from "node_modules/@chakra-ui/react/dist/types/components/dialog/namespace";

const InputModal: FC<Props> = ({
  open,
  onToggle,
}) => {
  // 省略

+  const onOpenChange = (details: OpenChangeDetails) => {
+    const { open } = details;
+    if (open === false) {
+      console.log("📝モーダルが閉じる直前に発火！");
+    }
+    onToggle();
+  };

  return (
    <DialogRoot size={"sm"} open={open} onOpenChange={onToggle}>
      {/*省略*/}
    </DialogRoot>
  );
};

おわりに

コンポーネントの型ファイルを追えばわかりましたが、ほかに良い方法がありましたら教えてください！

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp