Output terminal isn't cleared when second to last frame is taller than terminal

[matteodepalo]

Hi,
As per description, I noticed that the terminal is correctly cleared if the last frame output is taller than the terminal window, however, if the last frame is shorter, the second to last frame isn't cleared. Here's a video to demonstrate this:

03-50-xck1w-29hr6.mp4

I would expect ink to not show the list after pressing enter. Is this expected behavior?

For now I've littered my code with things like this, but I would expect Ink to handle such scenarios.

if (stdout && wrapperHeight >= stdout.rows - 1) {
  stdout.write(ansiEscapes.clearTerminal)
}

setSomething(false)

Where wrapperHeight is the height of the Box containing everything.

Code to reproduce (make your terminal window height less than 20 lines):

import React, { useState } from 'react';
import { render, Text, Box, useInput } from 'ink';

function ClearTerminalBug() {
  const lines = [];

  for (let i = 1; i <= 20; i++) {
    lines.push(`line ${i}`);
  }

  const [done, setDone] = useState(false)

  useInput((_input, key) => {
    if (key.return) {
      setDone(true)
    }
  });

  return done ? <Text>done</Text> : <Box flexDirection="column">
    {lines.map((line, index) => (
      <Text key={index}>{line}</Text>
    ))}
  </Box>
}

render(
  <ClearTerminalBug />
)

Reproduction repo https://github.com/matteodepalo/clear-terminal

[matteodepalo]

After creating this issue I noticed that this doesn't happen just on exit, it happens even without it. I've updated the issue.

[vadimdemedes]

Thanks for a detailed bug report! Submitted a fix over here → #586.