Fix handling of terminal resize (#828)

Author: wu-json

examples/terminal-resize/index.ts

@@ -0,0 +1 @@
+import './terminal-resize.js';

examples/terminal-resize/terminal-resize.tsx

@@ -0,0 +1,40 @@
+import React, {useState} from 'react';
+import {render, Box, Text, useInput} from '../../src/index.js';
+
+function TerminalResizeTest() {
+	const [value, setValue] = useState('');
+
+	useInput(input => {
+		if (input === '\r') {
+			// Enter key - clear input
+			setValue('');
+		} else if (input === '\u007F' || input === '\b') {
+			// Backspace
+			setValue(previous => previous.slice(0, -1));
+		} else {
+			// Regular character
+			setValue(previous => previous + input);
+		}
+	});
+
+	return (
+		<Box flexDirection="column" padding={1}>
+			<Text bold color="cyan">
+				=== Terminal Resize Test ===
+			</Text>
+			<Text>
+				Type something and then resize your terminal (drag the edge or press
+				Cmd/Ctrl -/+)
+			</Text>
+			<Text>Input: "{value}"</Text>
+			<Box marginTop={1}>
+				<Text dimColor>Press Ctrl+C to exit</Text>
+			</Box>
+		</Box>
+	);
+}
+
+render(<TerminalResizeTest />, {
+	patchConsole: true,
+	exitOnCtrlC: true,
+});

src/ink.tsx

@@ -54,6 +54,7 @@ export default class Ink {
 	private isUnmounted: boolean;
 	private lastOutput: string;
 	private lastOutputHeight: number;
+	private lastTerminalWidth: number;
 	private readonly container: FiberRoot;
 	private readonly rootNode: dom.DOMElement;
 	// This variable is used only in debug mode to store full static output
@@ -103,6 +104,7 @@ export default class Ink {
 		// Store last output to only rerender when needed
 		this.lastOutput = '';
 		this.lastOutputHeight = 0;
+		this.lastTerminalWidth = this.getTerminalWidth();
 
 		// This variable is used only in debug mode to store full static output
 		// so that it's rerendered every time, not just new static parts, like in non-debug mode
@@ -149,19 +151,33 @@ export default class Ink {
 		}
 	}
 
+	getTerminalWidth = () => {
+		// The 'columns' property can be undefined or 0 when not using a TTY.
+		// In that case we fall back to 80.
+		return this.options.stdout.columns || 80;
+	};
+
 	resized = () => {
+		const currentWidth = this.getTerminalWidth();
+
+		if (currentWidth < this.lastTerminalWidth) {
+			// We clear the screen when decreasing terminal width to prevent duplicate overlapping re-renders.
+			this.log.clear();
+			this.lastOutput = '';
+		}
+
 		this.calculateLayout();
 		this.onRender();
+
+		this.lastTerminalWidth = currentWidth;
 	};
 
 	resolveExitPromise: () => void = () => {};
 	rejectExitPromise: (reason?: Error) => void = () => {};
 	unsubscribeExit: () => void = () => {};
 
 	calculateLayout = () => {
-		// The 'columns' property can be undefined or 0 when not using a TTY.
-		// In that case we fall back to 80.
-		const terminalWidth = this.options.stdout.columns || 80;
+		const terminalWidth = this.getTerminalWidth();
 
 		this.rootNode.yogaNode!.setWidth(terminalWidth);
 

test/terminal-resize.tsx

@@ -0,0 +1,157 @@
+import test from 'ava';
+import delay from 'delay';
+import stripAnsi from 'strip-ansi';
+import React from 'react';
+import {render, Box, Text} from '../src/index.js';
+import createStdout from './helpers/create-stdout.js';
+
+test.serial('clear screen when terminal width decreases', async t => {
+	const stdout = createStdout(100);
+
+	function Test() {
+		return (
+			<Box borderStyle="round">
+				<Text>Hello World</Text>
+			</Box>
+		);
+	}
+
+	render(<Test />, {stdout});
+
+	const initialOutput = stripAnsi(
+		(stdout.write as any).firstCall.args[0] as string,
+	);
+	t.true(initialOutput.includes('Hello World'));
+	t.true(initialOutput.includes('╭')); // Box border
+
+	// Decrease width - should trigger clear and rerender
+	stdout.columns = 50;
+	stdout.emit('resize');
+	await delay(100);
+
+	// Verify the output was updated for smaller width
+	const lastOutput = stripAnsi(
+		(stdout.write as any).lastCall.args[0] as string,
+	);
+	t.true(lastOutput.includes('Hello World'));
+	t.true(lastOutput.includes('╭')); // Box border
+	t.not(initialOutput, lastOutput); // Output should change due to width
+});
+
+test.serial('no screen clear when terminal width increases', async t => {
+	const stdout = createStdout(50);
+
+	function Test() {
+		return (
+			<Box borderStyle="round">
+				<Text>Test</Text>
+			</Box>
+		);
+	}
+
+	render(<Test />, {stdout});
+
+	const initialOutput = (stdout.write as any).firstCall.args[0] as string;
+
+	// Increase width - should rerender but not clear
+	stdout.columns = 100;
+	stdout.emit('resize');
+	await delay(100);
+
+	const lastOutput = (stdout.write as any).lastCall.args[0] as string;
+
+	// When increasing width, we don't clear, so we should see eraseLines used for incremental update
+	// But when decreasing, the clear() is called which also uses eraseLines
+	// The key difference: decreasing width triggers an explicit clear before render
+	t.not(stripAnsi(initialOutput), stripAnsi(lastOutput));
+	t.true(stripAnsi(lastOutput).includes('Test'));
+});
+
+test.serial(
+	'consecutive width decreases trigger screen clear each time',
+	async t => {
+		const stdout = createStdout(100);
+
+		function Test() {
+			return (
+				<Box borderStyle="round">
+					<Text>Content</Text>
+				</Box>
+			);
+		}
+
+		render(<Test />, {stdout});
+
+		const initialOutput = stripAnsi(
+			(stdout.write as any).firstCall.args[0] as string,
+		);
+
+		// First decrease
+		stdout.columns = 80;
+		stdout.emit('resize');
+		await delay(100);
+
+		const afterFirstDecrease = stripAnsi(
+			(stdout.write as any).lastCall.args[0] as string,
+		);
+		t.not(initialOutput, afterFirstDecrease);
+		t.true(afterFirstDecrease.includes('Content'));
+
+		// Second decrease
+		stdout.columns = 60;
+		stdout.emit('resize');
+		await delay(100);
+
+		const afterSecondDecrease = stripAnsi(
+			(stdout.write as any).lastCall.args[0] as string,
+		);
+		t.not(afterFirstDecrease, afterSecondDecrease);
+		t.true(afterSecondDecrease.includes('Content'));
+	},
+);
+
+test.serial('width decrease clears lastOutput to force rerender', async t => {
+	const stdout = createStdout(100);
+
+	function Test() {
+		return (
+			<Box borderStyle="round">
+				<Text>Test Content</Text>
+			</Box>
+		);
+	}
+
+	const {rerender} = render(<Test />, {stdout});
+
+	const initialOutput = stripAnsi(
+		(stdout.write as any).firstCall.args[0] as string,
+	);
+
+	// Decrease width - with a border, this will definitely change the output
+	stdout.columns = 50;
+	stdout.emit('resize');
+	await delay(100);
+
+	const afterResizeOutput = stripAnsi(
+		(stdout.write as any).lastCall.args[0] as string,
+	);
+
+	// Outputs should be different because the border width changed
+	t.not(initialOutput, afterResizeOutput);
+	t.true(afterResizeOutput.includes('Test Content'));
+
+	// Now try to rerender with a different component
+	rerender(
+		<Box borderStyle="round">
+			<Text>Updated Content</Text>
+		</Box>,
+	);
+	await delay(100);
+
+	// Verify content was updated
+	t.true(
+		stripAnsi((stdout.write as any).lastCall.args[0] as string).includes(
+			'Updated Content',
+		),
+	);
+});