Tengo una aplicación de reacción en la que estoy trabajando, y actualmente tengo un menú desplegable personalizado que quiero abrir/cerrar cuando un usuario hace clic en el gatillo (el botón de flecha), cerrarlo cuando un usuario selecciona una opción, o ciérrelo cuando un usuario haga clic fuera del componente mostrado.

Aquí está mi código:

En aras de la simplicidad, solo agregué el código con el que quiero ayuda.

 class NavBar extends Component { constructor(props) { super(props); this.state = { showCurrencies: false, }; this.handleShowCurrencies = this.handleShowCurrencies.bind(this); } componentDidMount() { this.currencyRef = createRef(); } componentDidUpdate(prevProps, prevState) { if (this.state.showCurrencies) return this.currencyRef.current.focus(); } handleShowCurrencies = () => { this.setState({ showCurrencies: !this.state.showCurrencies, }); }; render() { <div className="currency-switch" onClick={this.handleShowCurrencies}> {currencySymbol} <span> <button> <img src={`${process.env.PUBLIC_URL}/images/arrow.png`} /> </button> </span> </div> {this.state.showCurrencies ? ( <div className="dropdown" tabIndex={"0"} ref={this.currencyRef} onBlur={this.handleShowCurrencies} > {currencies?.map((currency) => ( <div key={currency.symbol} className={`dropdown-items ${currencySymbol === currency.symbol ? "selected" : "" }`} onClick={() => changeCurrencySymbol(currency.symbol)} > {`${currency.symbol} ${currency.label}`} </div> ))} </div> ) : null} }

Actualmente, dirigir el foco a un elemento div funciona bien y hacer clic fuera del elemento también. Sin embargo, volver a hacer clic en el gatillo o incluso seleccionar una opción no cierra el elemento div. Parece que se está procesando dos veces (echa un vistazo más de cerca a la consola): https://drive.google.com/file/d/1ObxU__SbD_Upxr6qcy5eYO4LSy6Mzq9C/view?usp=sharing

¿Por qué está pasando eso? ¿Cómo puedo resolverlo?

PD: No suelo preguntar sobre StackOverflow, así que no estoy familiarizado con el proceso. Por favor, tenga paciencia conmigo. Si necesita cualquier otra información, estaré más que feliz de proporcionársela.