vadimdemedes / ink

🌈 React for interactive command-line apps
https://term.ink
MIT License
27.13k stars 608 forks source link

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

Open matteodepalo opened 1 year ago

matteodepalo commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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