I am working on a react project, where we want to popout a terminal into a separate window. (Here is the basic premise of how it works)

In my main project, though the terminal in the new window does open and all other functions involved within the component work, for some reason the text does not display in that popout window.

The cursor will be in correct position and spaces will be created for lines, as if the text is there. I know that the terminal is receiving data but for some reason, it appears as if the canvas part of the terminal is unable to draw the text.

I was able to get the popout terminal to display partial text once or more by chance, when i created a lot of terminals in the popout window (I am unable to provide a consistent way of doing this). Leading me to believe there could be a problem with how other parts of the xterm.js source code handles getting the document element, weather it grabs from the default main browser window, by simply calling document or if someway it can get the window/ document object from the container element that is passed to terminal on terminal.open().

As you will see in the test repo I provided, I had to ensure I got the correct document by accessing the new window in the <Portal/> component in App.js. But that is my guess as to what is happening. Please let me know if you need any more information.

Details

• Browser and browser version: FireFox 99.0.1 (64-bit)
• OS version: Windows 21H2
• xterm.js version: ^4.18.0"
  

Steps to reproduce

1. Clone the test repo i have created (here)
2. run "npm i"
3. run "npm start"
4. should then see the terminal is created on the main browser window with the text showing, then in the popout window there will be a terminal present but no text displayed.