xtermjs dynamic height not updating correctly

Question

I'm trying to make the height of xtermjs dynamic. I've looked around but the solutions don't seem to solve my issue. I played with CSS but the problem doesn't seem to be there. I'm also using the xterm-addon-fit.

As an example I created this sandbox to show the issue. I've added a dragging pane that has a somewhat hard to see black bar in the bottom. When I drag it, the xtermjs component doesn't resize.

In the image below, the black box with numbers (xterm) should be inside the orange box after we resize the orange box.

I've used a component to make it easier to test, but it happens if we resize the window in other ways.

What am I missing here?

Answer 1

As explained by @jerk, if we fit when the resize happens, it fixes the issue. This codesandbox with an extra hook makes it work. Although now to test it, you have to drag the console pane up and down instead of using the custom component.

  // It resizes xterm when the height changes
  useEffect(() => {
    fitAddon.fit();
  }, [height]);

Notice the auto scroll stops. Depending on the scenario, you might want to scroll to the bottom.