Estoy trabajando en un proyecto, en React, componentes de clase, que es así:
Una barra de navegación con un menú desplegable y <section> con más tarjetas. Cuando el menú desplegable está abierto, la <section> tiene un color de fondo que está encima de todos los demás elementos. Para cerrar el menú desplegable, haga clic fuera de él.
onMouseEnter cada tarjeta, se muestran más datos ( display:none to display:flex ), y onMouseLeave cada tarjeta, los datos están ocultos ( display:flex to dispaly:none ).
El problema es que, si el puntero del mouse está en una tarjeta, después de que se cierra el menú desplegable, los datos adicionales permanecen ocultos.
Este es el <div> que está causando problemas:

 <div className={ bla.type === "blla" ? "flex" : bla.type !== "blla" && this.props.showOtherAttr === false ? "hidden" : "flex" }>

Y este es un fragmento del componente principal:

 class Article extends Component { state = { showOtherAttr: false, isFocused: false }; render() { const dispalyOtherAttr = () => { if (this.state.showOtherAttr === false) { this.setState({ showOtherAttr: true }); } else if (this.state.isFocused === true){ this.setState({ showOtherAttr: true }) } }; const hideOtherAttr = () => { if (this.state.showOtherAttr === true) { this.setState({ showOtherAttr: false, }); } } const handleFocus = () => { this.setState({ isFocused: true }) } return ( <div className="card" onMouseEnter={(e) => { dispalyOtherAttr(); this.props.reduxAction }} onFocus = {()=>handleFocus()} onMouseLeave={()=>{hideOtherAttr(); this.props.resetStateReduxAction()} > <ComponentWithDiv showOtherAttr={this.state.showOtherAttr}> </div> ); } } export default Article

Intenté usar el evento onFocus en el <div> externo de la tarjeta, pero nada.
Traté de anular la clase CSS .hidden{display: none} así:

 .card:focus div.hidden { display: flex }

y así:

 .card:focus:nth-child(3){ display: flex; }

Busqué en eventos sintéticos de reacción, pero no hay nada como "mouseAlreadyHere".
¿Cómo hacer que muestre datos adicionales y llame a this.props.reduxAction, después de cerrar el menú desplegable y el mouse está dentro de la tarjeta?
¡Muchos gracias!