Creé este menú desplegable simple en React y todo funciona bien hasta que hago clic fuera del alcance del menú desplegable. https://codesandbox.io/s/restless-fast-x2jhe8
Agregué una propiedad min-height: 100vh
en el cuerpo, para replicar una página de tamaño completo. Como dije, la funcionalidad para cerrar el menú desplegable cuando hacemos clic en cualquier lugar de la página que no sea el menú desplegable, aún no está implementada. No estoy seguro de cómo manejar esto de la manera más elegante. Intenté algo como agregar un detector de eventos en el cuerpo con useEffect
y luego verificar si event.target
tiene un dropdown
de clase, pero no funcionó como se esperaba.
Hago este enlace común en el que paso la ref
de ese element
y state
cuál muestra o cierra modal
import { useEffect } from 'react'; function useOutsideClickManager(ref: React.RefObject<HTMLInputElement>, setIsOpen: React.Dispatch<React.SetStateAction<boolean>>) { useEffect(() => { function handleClickOutside(event: { target: EventTarget | Node | null }) { if (ref.current && !ref.current.contains(event.target as Node)) { setIsOpen(false); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [ref, setIsOpen]); } export { useOutsideClickManager };
const [isOpen, setIsOpen] = React.useState(false); const wrapperRef = useRef<HTMLInputElement>(null); useOutsideClickManager(wrapperRef, setIsOpen);