Hice un menú desplegable personalizado con un div que configuré un atributo onClick para abrir el menú desplegable y cerrarlo. pero también quiero cerrarlo cuando el usuario haga clic en otra parte del sitio.
<div onClick={() => setIsDropDownOpen(!isDropDownOpen)} className="selected-drop-down" > <span className="dropDownText">{selectedQuoteCurrency}</span> <img className="dropDownIcon" src={require("../assets/image/arrow/dropDown-Arrow.png")} width="15px" alt="arrow" /> </div>yo tambien hago esta logica
useEffect(() => { if(isDropDownOpen) { window.addEventListener('click',changeDD ) }else { window.removeEventListener('click',changeDD ) } },[isDropDownOpen]) function changeDD() { setIsBaseDropDownOpen(false) } Pero me enfrenté al problema de que cuando el componente se didmount por primera vez, todo estaba bien y se abrió el menú desplegable y cuando se hizo clic allí se cerró, pero por segunda vez, el menú desplegable no se abrió porque el estado no cambió a verdadero. .
además, traté de manejar este evento de clic por el atributo tabindex de acuerdo con este documento => desarrolladorMozila pero no tuve éxito
Puedes usar hover en css como este. cuando el mouse se aleja de la ubicación del menú desplegable, se cierra automáticamente.
.options:hover{ display: flex; flex-direction: column; position: absolute; } <div className="options"> <button>Add</button> <button>Logout</button> </div>