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!

[ayozebarrera]

Did you have any luck ?

[KiddoV]

@ayozebarrera Thanks for checking!
I still have that same jump effect and the prompt still got push down a bit, not sure if I miss anything?

Code

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();
      term.scrollToBottom();
    });
    attachTerminalSession(term);
    //
    term.writeln("Welcome to VTerm 🚀");
    termRef.current = { term, fitAddon };
    //
    let rafId = 0;
    const resizeObserver = new ResizeObserver(() => {
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(() => {
        fitAddon.fit();
        term.scrollToBottom();
      });
    });
    resizeObserver.observe(containerRef.current);
    // Dispose()
    return () => {
      resizeObserver.disconnect();
      cancelAnimationFrame(rafId);
      term.dispose();
    };
  }, []);
  //
  return (
    <>
      <style>{}</style>
      <div
        ref={containerRef}
        style={{
          flex: 1,
          minHeight: 0,
          backgroundColor: termConfig.theme?.background,
          padding: "5px",
          width: "100%",
          height: "100%",
          overflow: "hidden",
        }}
      />
    </>
  );
}

[jerch]

since the terminal is the only content you have two ways to fix the "snapping":

• make the whole window snapping too
• place the terminal widget with margin: auto and some padding to visually ease out the snapping distraction

[KiddoV]

@jerch It doesn't work when adding margin: auto, even worst when I put it on the parent element of the terminal

{/* This would auto shrink the width of terminal to the minimum automatically */}
<div style={{ flex: 1, overflow: "hidden", margin; "auto" }}>
  <XTerminal />
</div>

[jerch]

Sorry, I am not going to solve it for you. Please read up the conventions for using margin: auto properly. This is a CSS issue, not terminal related.

[PerBothner]

If the cursor is on the bottom row before resize, it probably makes sense for it to stay on the bottom row after resize (assuming there are enough lines available in the scrollback). However, it does have the unusual effect that the "home" position might move backwards into the scrollback area.

[KiddoV]

Do you know how to make it behave like VS Code?