I am trying to use chakra ui modal in my app. but this modal is not showing , when I directly pass true to to isOpen .its showing .but when i pass isOpen Disclosure it is not working. when I check the react dev tools. the value of isOpen is changed to true on the button click. but the popup is not coming
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
useDisclosure,
} from '#chakra-ui/react'
function Home() {
const {isOpen,onOpen,onClose} = useDisclosure()
return (
<>
<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>
</>
)
}
export default Home
Related
I used this document to create modal. it's working fine in first time that I call open button but when I close modal, open button not working again. Do you have any idea?
import { useDisclosure, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Center } from '#chakra-ui/react'
import React from 'react'
export default function Register() {
const { isOpen, onOpen, onClose, onToggle } = useDisclosure()
return (
<Center height={500}>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
test
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button variant='ghost'>Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Center>
)
}
I deleted StrictMode tag in app.tsx file and now it's work fine.
<React.StrictMode> </React.StrictMode>
it should be like this:
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<Provider store={store}>
<ChakraProvider theme={theme}>
<BrowserRouter>
<App />
</BrowserRouter>
</ChakraProvider>
</Provider>
)
I have this modal function
function ReplyModal({ author, title }: { author: string; title: string }) {
return (
<>
<Button onClick={onOpen}>Responder</Button>
<Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Respondendo a tarefa de {author}</ModalHeader>
<ModalCloseButton />
<ModalBody>{myForm}</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={() => onReply(title, author)}
>
Enviar
</Button>
<Button variant="ghost" onClick={onClose}>
Cancelar
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
The modal body is this component:
const myForm = (
<div>
<p>Mensagem</p>
<textarea
placeholder="Digite sua mensagem"
value={reply}
onChange={(e) => setReply(e.currentTarget.value)}
></textarea>
<p>Selecionar arquivo</p>
<input id="replyFile" type="file"></input>
</div>
);
When i type on that textarea the modal closes instantly. I saw on a github thread that i should take out of the function the const { isOpen, onOpen, onClose } = useDisclosure();. I did it but still closes everytime i start typing. Actually, when i took it out of the function, when i type something it closes and open again.
What am i doing wrong here?
I'm trying to solve a problem that seems quite straight forward. I want to focus a form element as soon as a modal opens.
Since react-hook-form does not provide a direct handle to the form refs, I'm trying to use a useEffect hook and react-hook-forms howngrown setFocus functions but I keep seeing the error:
s.focus is not a function
Code
--> Link to coding sandbox
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import {
ChakraProvider,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
Button,
ModalCloseButton,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { setFocus, register } = useForm();
const { isOpen, onClose, onOpen } = useDisclosure();
useEffect(() => {
if (!isOpen) return;
setFocus("name");
}, [setFocus, isOpen]);
return (
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<input {...register("name")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
);
}
Maybe setFocus can't run because the modal content (and the input inside) is first unmounted.
An easy solution using setFocus is to make the form as an independant component :
const Form = () => {
const { setFocus, register } = useForm();
useEffect(() => {
setFocus("name");
}, [setFocus]);
return <input {...register("name")} />;
};
and then include it inside the modalBody.
Fixed sandbox link
Read the Chakra documentation there is one prop initialFocusRef, you can pass the ref to the element you want to focus on initially
Chakra provides 2 props for this use case:
initialFocusRef: The ref of the component that receives focus when the modal opens.
finalFocusRef: The ref of the component that receives focus when the modal closes.
import { useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import {
ChakraProvider,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
Button,
ModalCloseButton,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { setFocus, register } = useForm();
const { isOpen, onClose, onOpen } = useDisclosure();
const initialRef = useRef();
useEffect(() => {
//setFocus("name");
}, [setFocus, isOpen]);
return (
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<input {...register("name")} ref={initialRef} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
);
}
UPDATED BASED ON COMMENT
By default, Chkra focus enabled elements if you just add tabIndex to your elements and give order value appropriately then it will get focused. Previously close button was focused by default, now in the below code you will notice I have given tabIndex=2 to the close button and tabIndex=1 to the input element and it is working as expected.
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton tabIndex="2" />
<ModalBody>
<input tabIndex="1" {...register("name")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
If you want to use that using ref then you can check "How to share ref usage?", maybe it will help you.
I have a page with a modal window. In development mode, it opens. But when I upload my React App to vercel, then the screen just darkens there, and the modal window does not appear, but all the window controls work. Who faced the same problem?
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<>
<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>
</>
)
I was able to fix this by upgrading the "framer-motion": version -> "framer-motion": "^4.1.16".
I am trying to use MUI readymade components in my react application,
I import everything correctly, after all these when I am running the app, there is the only element shows in the browser, not its style.
import React, { Component } from 'react';
import Button from '../node_modules/muicss/lib/react/button';
class App extends Component {
render() {
return (
<div>
<div>
<Button size="small" color="primary">button</Button>
<Button size="small" color="primary" variant="flat">button</Button>
<Button size="small" color="primary" variant="raised">button</Button>
<Button size="small" color="primary" variant="fab">+</Button>
</div>
<div>
<Button color="primary">button</Button>
<Button color="primary" variant="flat">button</Button>
<Button color="primary" variant="raised">button</Button>
<Button color="primary" variant="fab">+</Button>
</div>
<div>
<Button size="large" color="primary">button</Button>
<Button size="large" color="primary" variant="flat">button</Button>
<Button size="large" color="primary" variant="raised">button</Button>
<Button size="large" color="primary" variant="fab">+</Button>
</div>
</div>
);
}
}
export default App;
You dont need to set the exact path for node_modules just type the component name for importing any component.
Like below import statement in material ui doc.
import Button from '#material-ui/core/Button';