I'm using Next js and implementing modal dialog using @headlessui/react package. I'm setting an overlay but it closes all components when clicked.
index.js
const [modal, setModal] = useState("");
const [openModal, setOpenModal] = useState(false)
return (
<div>
{openModal && <Modal vid={modal} onClose={setOpenModal}/>}
...{
<div onClick={()=> {setOpenModal(true), setModal(res.snippet.resourceId?.videoId)}}>
}
...
</div>
)
Modal.js
import { Dialog } from "@headlessui/react";
import { useRef } from "react";
import YouTube from 'react-youtube'
import { XIcon } from "@heroicons/react/outline";
export function Modal({ vid, onClose }) {
let overlayRef = useRef();
const opts ={
playerVars: {
autoplay: 1,
}
}
//onClick={(e)=> e.stopPropagation()}
return (
<Dialog.Overlay
ref={overlayRef}
className="fixed inset-0 bg-gray-800/60"
/>
<button onClick={()=> onClose(false)} className=' pb-3'>
);
} export default Modal
so how can I fix the overlay to only close when clicked outside of the component?
