How to prevent the prompt to push down when resize height?

[KiddoV]

Currently I have an XTerm setup like this:

import { useEffect, useRef } from "react";
import { ITerminalInitOnlyOptions, ITerminalOptions, Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import "@xterm/xterm/css/xterm.css";

// ========================================================================= //
//
export default function XTerminal() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const termRef = useRef<{ term: Terminal; fitAddon: FitAddon } | null>(null);
  const termConfig: ITerminalOptions & ITerminalInitOnlyOptions = {
    cursorBlink: true,
    fontSize: 14,
    theme: { background: "#191A1B" },
    lineHeight: 1,
  };
  //
  useEffect(() => {
    // Init()
    const fitAddon = new FitAddon();
    const term = new Terminal(termConfig);
    //
    term.loadAddon(fitAddon);
    if (!containerRef.current) return; // Make sure HTML container available
    term.open(containerRef.current);
    requestAnimationFrame(() => fitAddon.fit());
    attachTerminalSession(term);
    //
    term.writeln("Welcome to VTerm 🚀");
    termRef.current = { term, fitAddon };
    // Handle resize
    const handleResize = () => {
      termRef.current?.fitAddon.fit();
    };
    window.addEventListener("resize", handleResize);
    // Dispose()
    return () => {
      window.removeEventListener("resize", handleResize);
      term.dispose();
    };
  }, []);
  //
  return (
    <>
      <style>{}</style>
      <div
        ref={containerRef}
        style={{
          flex: 1,
          minHeight: 0,
          backgroundColor: termConfig.theme?.background,
          padding: "5px",
          marginBottom: "10px",
          width: "100%",
          height: "100%",
          overflow: "hidden",
        }}
      />
    </>
  );
}

When resizing, I noticed the prompt input field always got pushed down a bit before resizing again...

But in VSCode, I don't see that behavior...

Is anyone know how do I archive the behavior like the terminal in VSCode?
Thanks!

[ayozebarrera]

Hello,

This is the default behavior of xterm.js when calling fit() on resize. When the height grows, xterm adds empty rows below the cursor (the buffer grows downward), so your prompt stays where it was and looks like it's being pushed down — until the next render snaps it back into place.

I solved a similar problem doing this:

const handleResize = () => {
  const t = termRef.current;
  if (!t) return;
  t.fitAddon.fit();
  t.term.scrollToBottom();
};

And the same on the initial fit

requestAnimationFrame(() => {
  fitAddon.fit();
  term.scrollToBottom();
});

Using window.resize (it fires on window changes, not on containers changes) and is expensive because it fires a lot. I had a lot of problems so I change it using ResizeObserver

let rafId = 0;
const ro = new ResizeObserver(() => {
  cancelAnimationFrame(rafId);
  rafId = requestAnimationFrame(() => {
    fitAddon.fit();
    term.scrollToBottom();
  });
});
ro.observe(containerRef.current);

// cleanup
return () => {
  ro.disconnect();
  cancelAnimationFrame(rafId);
  term.dispose();
};

Hope it helps!

[KiddoV]

Thank you, will try to see how it goes.