import React, { useRef, useEffect } from 'react'; import { Link } from 'react-router-dom'; import Transition from '../utils/Transition'; function ModalSearch({ id, searchId, modalOpen, setModalOpen }) { const modalContent = useRef(null); const searchInput = useRef(null); // close on click outside useEffect(() => { const clickHandler = ({ target }) => { if (!modalOpen || modalContent.current.contains(target)) return setModalOpen(false); }; document.addEventListener('click', clickHandler); return () => document.removeEventListener('click', clickHandler); }); // close if the esc key is pressed useEffect(() => { const keyHandler = ({ keyCode }) => { if (!modalOpen || keyCode !== 27) return; setModalOpen(false); }; document.addEventListener('keydown', keyHandler); return () => document.removeEventListener('keydown', keyHandler); }); useEffect(() => { modalOpen && searchInput.current.focus(); }, [modalOpen]); return ( <> {/* Modal backdrop */}