ink icon indicating copy to clipboard operation
ink copied to clipboard

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

Open matteodepalo opened this issue 2 years ago • 2 comments

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:

https://user-images.githubusercontent.com/151725/235908525-e94e1955-4663-425d-a2f6-4430200365be.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 avatar May 03 '23 11:05 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.

matteodepalo avatar May 03 '23 12:05 matteodepalo

Thanks for a detailed bug report! Submitted a fix over here → https://github.com/vadimdemedes/ink/pull/586.

vadimdemedes avatar May 03 '23 20:05 vadimdemedes