モーダルが表示されない 【TypeScript × React v19 × Chakra UI v3】

はじめに

このUdemyの講座で実践的なアプリ作成のセクションで、ユーザーの詳細を見られるようなモーダルを作成していたのですが、表示することに苦戦しました。

問題

理想はUserCardのコンポーネントを押下すると、モーダルが表示されるような挙動ですが、実際は以下のように、背景が少し変わるだけでした。

解決方法

モーダルを記述しているUserDetailModal.tsxに以下のように<DialogPositioner>タグを使って囲むことで解決することができました。

実際のコードは以下の通りです。

UserDetailModal.tsx

import {
  DialogBackdrop,
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogHeader,
  DialogPositioner,
  DialogRoot,
  DialogTitle,
  Input,
  Portal,
  Stack,
} from "@chakra-ui/react";
import type { User } from "../../../types/api/user";

type Props = {
  user: User | null;
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

export const UserDetailModal = (props: Props) => {
  const { user, open, setOpen } = props;

  console.log("UserDetailModal render - open:", open, "user:", user);

  return (
    <Portal>
      <DialogRoot
        open={open}
        onOpenChange={(e) => {
          setOpen(e.open);
        }}
        trapFocus={false}
      >
        <DialogBackdrop />
        <DialogPositioner>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>ユーザー詳細</DialogTitle>
            </DialogHeader>
            <DialogBody>
              <Stack>
                <p>名前</p>
                <Input value={user?.username || ""} readOnly />
                <p>フルネーム</p>
                <Input value={user?.name || ""} readOnly />
                <p>MAIL</p>
                <Input value={user?.email || ""} readOnly />
                <p>TELE</p>
                <Input value={user?.phone || ""} readOnly />
              </Stack>
            </DialogBody>
            <DialogCloseTrigger />
          </DialogContent>
        </DialogPositioner>
      </DialogRoot>
    </Portal>
  );
};

おわりに

今回はモーダルの表示のときの不具合を説明しました。公式ドキュメントには正確な記載があるので、参照してみてください。

参考

JISOU のメンバー募集中！

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