I’m trying to use React’s new Portal function in order to open an AgGridReact component in a pop up window. However, the issue I am running into is when I open the component in a new window, the table functions do not work while the mouse cursor is in the pop up window. However, if I drag my mouse into the original window, the component starts to work, allowing me to change the size of the columns while my mouse is above the original window and not the pop up window.

Specifically, I am creating a new html, then calling

ReactDOM.createPortal(this.props.children, this.containerEl)
(


containerEl

being the created html element). I then attach the new element to the created external window. I then pass

containerEl

as the

popupParent

to the AgGridReact component. If anyone would like to see anymore code I can post as required. But any help or pointers would be greatly appreciated.

Where the AgGridReact is rendered

    const [openedElement, setOpenedElement] = useState()
   
    const updateOpenedElement = val => {
   
      !openedElement && setOpenedElement(val)
  
    } 

    <AgGridReact 
   
    ...
  
     popupParent={openedElement? openedElement: window.document.getElementById("root")}

    ...
    
    >
    </AgGridReact>)

​ And the code for the NewWindow is as follows

    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 is called in a parent component, which I am using in order to create the element popupParent will use.