Estoy tratando de usar la nueva función Portal de React para abrir un componente AgGridReact en una ventana emergente. Sin embargo, el problema con el que me encuentro es cuando abro el componente en una nueva ventana, las funciones de la tabla no funcionan mientras el cursor del mouse está en la ventana emergente. Sin embargo, si arrastro mi mouse a la ventana original, el componente comienza a funcionar, permitiéndome cambiar el tamaño de las columnas mientras mi mouse está sobre la ventana original y no sobre la ventana emergente.
Específicamente, estoy creando un nuevo html, luego llamo
ReactDOM.createPortal(this.props.children, this.containerEl) ( containerElsiendo el elemento html creado). Luego adjunto el nuevo elemento a la ventana externa creada. luego paso
containerElcomo el
popupParental componente AgGridReact. Si alguien quisiera ver más código, puedo publicarlo según sea necesario. Pero cualquier ayuda o sugerencia sería muy apreciada.
Dónde se representa AgGridReact
const [openedElement, setOpenedElement] = useState() const updateOpenedElement = val => { !openedElement && setOpenedElement(val) } <AgGridReact ... popupParent={openedElement? openedElement: window.document.getElementById("root")} ... > </AgGridReact>)Y el código para NewWindow es el siguiente
const copyStyles = (sourceDoc, targetDoc) => {...} class NewWindow extends React.Component { constructor(props) { super(props) this.setOpenedElement = props.setOpenedElement this.containerEl = document.createElement('div') this.externalWindow = null } render() { this.setOpenedElement(this.containerEl) return ReactDOM.createPortal(this.props.children, this.containerEl) } componentDidMount() { this.externalWindow = window.open("", "", "width=600, height=400, left=200, top=200") copyStyles(document, this.externalWindow.document) this.externalWindow.document.body.appendChild(this.containerEl) } componentWillUnmount() { this.externalWindow.close() } }setOpenedElement se llama en un componente principal, que estoy usando para crear el elemento que usará popupParent.