Chakra UI Modal not working as it is supposed to

Question

I was following the documentation of chakra UI. Here is the documentation of chakra ui. But it is not working as it is supposed to do whenever I trigger the hook the screen goes blank.

Below is the code sample. The modal is placed at the end of the file. DialogModal Component which is imported from DialogModal.js file

import React from "react";
import {
    Avatar,
    Box,
    Collapse,
    DrawerContent,
    DrawerOverlay,
    Flex,
    Icon,
    IconButton,
    Input,
    InputGroup,
    InputLeftElement,
    Text,
    useColorModeValue,
    useDisclosure,
    useColorMode,
    Button,
    Drawer,
} from "@chakra-ui/react";
import {AddIcon} from '@chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';



import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
import DialogModal from "../../components/Modal/DialogModal";
import DonationBasedCampaigns from "../DonationBasedCampaigns/DonationBasedCampaigns";
    
export default function Swibc() {
      const sidebar = useDisclosure();
      const integrations = useDisclosure();

      // Create campaign drawer hooks
      const { isOpen, onOpen, onClose } = useDisclosure();
      const btnRef = React.useRef();

      let { path, url } = useRouteMatch();
      const { toggleColorMode: toggleMode } = useColorMode();
      const SwitchIcon = useColorModeValue(FaMoon, FaSun);
      const NavItem = (props) => {
        const { icon, children, ...rest } = props;
        return (
          <Flex
            align="center"
            px="4"
            pl="4"
            py="3"
            cursor="pointer"
            color={useColorModeValue("inherit", "gray.400")}
            _hover={{
              bg: useColorModeValue("gray.100", "gray.900"),
              color: useColorModeValue("gray.900", "gray.200"),
            }}
            role="group"
            fontWeight="semibold"
            transition=".15s ease"
            {...rest}
          >
            {icon && (
              <Icon
                mr="2"
                boxSize="4"
                as={icon}
              />
            )}
            {children}
          </Flex>
        );
      };
    
      const SidebarContent = (props) => (
        <Box
          as="nav"
          pos="fixed"
          top="0"
          left="0"
          zIndex="sticky"
          h="full"
          pb="10"
          overflowX="hidden"
          overflowY="auto"
          bg={useColorModeValue("white", "gray.800")}
          borderColor={useColorModeValue("inherit", "gray.700")}
          borderRightWidth="1px"
          w="60"
          {...props}
        >
          <Flex px="4" py="5" align="center">
            <Text
              fontSize="2xl"
              ml="2"
              color={useColorModeValue("brand.500", "white")}
              fontWeight="semibold"
            >
              cffp
            </Text>
          </Flex>
          <Flex
            direction="column"
            as="nav"
            fontSize="sm"
            color="gray.600"
            aria-label="Main Navigation"
          >
            <NavItem icon={MdHome}>Home</NavItem>
            <NavItem icon={FaRss}>Articles</NavItem>
            <NavItem icon={HiCollection}>Collections</NavItem>
            <NavItem icon={FaClipboardCheck}>Checklists</NavItem>
            <NavItem icon={HiCode} onClick={integrations.onToggle}>
              Integrations
              <Icon
                as={MdKeyboardArrowRight}
                ml="auto"
                transform={integrations.isOpen && "rotate(90deg)"}
              />
            </NavItem>
            <Collapse in={integrations.isOpen}>
              <NavItem pl="12" py="2">
                Shopify
              </NavItem>
              <NavItem pl="12" py="2">
                Slack
              </NavItem>
              <NavItem pl="12" py="2">
                Zapier
              </NavItem>
            </Collapse>
            <NavItem icon={AiFillGift}>Changelog</NavItem>
            <NavItem icon={BsGearFill}>Settings</NavItem>
          </Flex>
        </Box>
      );
      return (
        <>
        
        <Box
          as="section"
          bg={useColorModeValue("gray.50", "gray.700")}
          minH="100vh"
        >
          <SidebarContent display={{ base: "none", md: "unset" }} />
         
          <Drawer
            isOpen={sidebar.isOpen}
            onClose={sidebar.onClose}
            placement="left"
          >
            <DrawerOverlay />
            <DrawerContent>
              <SidebarContent w="full" borderRight="none" />
            </DrawerContent>
          </Drawer>
          <Box ml={{ base: 0, md: 60 }} transition=".3s ease">
            <Flex
              as="header"
              align="center"
              justify="space-between"
              w="full"
              px="4"
              bg={useColorModeValue("white", "gray.800")}
              borderBottomWidth="1px"
              borderColor={useColorModeValue("inherit", "gray.700")}
              h="14"
            >
              <IconButton
                aria-label="Menu"
                display={{ base: "inline-flex", md: "none" }}
                onClick={sidebar.onOpen}
                icon={<FiMenu />}
                size="sm"
              />
              <InputGroup w="96" display={{ base: "none", md: "flex" }}>
                <InputLeftElement color="gray.500" children={<FiSearch />} />
                <Input  placeholder="Search for articles..." />
                
              </InputGroup>
    
              <Flex align="center">
                <Button 
                  colorScheme="brand" 
                  size="sm" 
                  mr={[1,1,3]}
                  onClick={onOpen}
                  ref={btnRef}
                > 
                  Create <AddIcon ml={[1,1,2]} /> 
                </Button>
                

                // MODAL 

                <DialogModal />
                <Avatar
                  mr="4"
                  size="sm"
                  name="anubra266"
                  src="https://avatars.githubusercontent.com/u/30869823?v=4"
                  cursor="pointer"
                />
                <Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
              </Flex>
            </Flex>

        </>
      );
    }

The DialogModal File :

import React from 'react';

import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button,
    Lorem,
    useDisclosure
} from "@chakra-ui/react"

const DialogModal = () => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <div>
        <Button onClick={onOpen}>Open Modal</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                <Lorem count={2} />
            </ModalBody>

            <ModalFooter>
                <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
                </Button>
                <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
            </ModalContent>
        </Modal>
        </div>
    )

}

export default DialogModal;

Answer 1

The latest version of chakra-ui, v3(as of now) does not have Modal Component like the previous version. You can do the same with Dialog Component in this version.

Answer 2

In my case, I was not wrapping the whole component with ChakraProvider because of which the Modal was opening in some weird way.

<ChakraProvider>{...your_component}</ChakraProvider>

Answer 3

The issue went away when I removed Lorem Tag from the modal.

const DialogModal = () => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <div>
        <Button onClick={onOpen}>Open Modal</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                {/* <Lorem count={2} /> */}
            </ModalBody>

            <ModalFooter>
                <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
                </Button>
                <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
            </ModalContent>
        </Modal>
        </div>
    )

}