writeln() does not write a new line and every write is shown twice and i need to click on the div to update the text

[JensvandeWiel]

Details

• Browser and browser version: microsoft webview2 / wails (electron alternative)
• OS version: windows 10 22h2 pro
• xterm.js version: 5.2.1

Steps to reproduce

1. create following react component with mui/joy

   
   import {Component} from "react";
   import React from "react";
   import {Alert, Button, Divider, LinearProgress, styled, Theme, useTheme} from "@mui/joy";
   import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
   import '../../../wailsjs/runtime/runtime';
   import {EventsOff, EventsOn, LogPrint} from "../../../wailsjs/runtime";
   import {Install} from '../../../wailsjs/go/installer/Installer';
   import {Terminal} from "xterm";
   import 'xterm/css/xterm.css';

//ts interface State { buttonVisible: boolean; }

export class Installer extends Component<{}, State> { //PROPS AND STATE private term: Terminal = new Terminal();

constructor(props: {}) {
    super(props);
    this.state = {
        buttonVisible: true,
    };
}

// region EVENTS

componentDidMount() {
    EventsOn("printToConsole", (line: string) => {
        this.WriteLineToLog(line);
    });

    const element = document.getElementById('console') as HTMLElement;

    this.term.open(element);
    this.term.writeln('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ \r\n');
    this.term.writeln('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ \r\n');

}

componentWillUnmount() {
    // Cleanup the event listener here when the component is unmounted
    EventsOff("printToConsole");

    if (this.term) {
        this.term.dispose();
    }
}

WriteLineToLog(line: string){

}

handleButtonClick = () => {
    if (this.term) {
        this.term.writeln('New line written on button click!\r\n\n\n'); // Add a new line when the button is clicked
    }
};

//endregion

render() {
    const Level1Div = styled('div')(({ theme }) => ({
        // The result is 'var(--joy-palette-primary-500)'
        backgroundColor: theme.vars.palette.background.level1,
    }));
    return (
        <>
            <Level1Div className="">
                <LinearProgress value={40} className="mt-1" />
                <p className="text-center text-xl mt-2">Installing Rust server </p>
                <Divider orientation="horizontal"/>
                <p className="font-bold ">Log:</p>
                <Button onClick={this.handleButtonClick} ></Button>
                <div className="" id="console"></div>
            </Level1Div>

        </>
    );
}

}

2. Run and check

I've been messing with it for 3 hourse now, can't find the problem
Maybe its something stupid or a option but i can seem to find out.
Please help 🙏 

[JensvandeWiel]

[JensvandeWiel]

Ok, i found out that the double printing is because its being called in componentDidMount without that and just clicking the button a couple of times i get: