Search code examples
javascriptangulartypescriptxtermjs

Hide helper text box from xterm js

I am using the xterm js to create a terminal application. When I add it to my Angular app, it shows the basic terminal but also a textbox with "W" on top of it.

ngOnInit() {
    let term = new Terminal();
    let fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    let element = document.getElementById('terminal');
    if (element) {
      term.open(element);
      fitAddon.fit();
      term.write('Hello from \x1B[1;3;31mvXterm\x1B[0m $ ');
      term.onKey((key) => {
        console.log(key);
        if (key.domEvent.code === 'Enter') {
          term.writeln('');
          term.write('Hello from \x1B[1;3;31xTerm\x1B[0m $ ');
        } else {
          term.write(key.key);
        }
      });
    }
  }

and terminal.component.html file:

<div class="terminal" id="terminal"></div>

xterm

When I click on the terminal, the cursor appears on the textbox and it is DOM element from the library. Does anyone know how to remove or hide it?enter image description here

Solution

  • It turns out the issue is from my testing environment. not the library. Closing the question