Skip to content

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

@matteodepalo

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions