Tab completion for placeholders

package.json

@@ -57,7 +57,7 @@
 		"pretty-quick": "^2.0.1",
 		"react": "^16.5.2",
 		"sinon": "^7.2.7",
-		"typescript": "^3.9.5",
+		"typescript": "^4.3.5",
 		"xo": "^0.32.0"
 	},
 	"peerDependencies": {

readme.md

@@ -13,8 +13,8 @@ $ npm install ink-text-input
 ## Usage
 
 ```jsx
-import React, { useState } from 'react';
-import { render, Box, Text } from 'ink';
+import React, {useState} from 'react';
+import {render, Box, Text} from 'ink';
 import TextInput from 'ink-text-input';
 
 const SearchQuery = () => {
@@ -75,6 +75,12 @@ Replace all chars and mask the value. Useful for password inputs.
 //=> "*****"
 ```
 
+### tabComplete
+
+Type: `boolean`
+
+Allow tab to complete the input with the placeholder value. Good for defaults.
+
 ### onChange
 
 Type: `Function`
@@ -93,8 +99,8 @@ This component also exposes an [uncontrolled](https://reactjs.org/docs/uncontrol
 
 ```jsx
 import React from 'react';
-import { render, Box, Text } from 'ink';
-import { UncontrolledTextInput } from 'ink-text-input';
+import {render, Box, Text} from 'ink';
+import {UncontrolledTextInput} from 'ink-text-input';
 
 const SearchQuery = () => {
 	const handleSubmit = query => {

source/index.tsx

@@ -32,6 +32,11 @@ interface Props {
 	 */
 	highlightPastedText?: boolean;
 
+	/**
+	 * Allow tab key to insert placeholder as the value.
+	 */
+	tabComplete?: boolean;
+
 	/**
 	 * Value to display in a text input.
 	 */
@@ -55,6 +60,7 @@ const TextInput: FC<Props> = ({
 	mask,
 	highlightPastedText = false,
 	showCursor = true,
+	tabComplete = false,
 	onChange,
 	onSubmit
 }) => {
@@ -116,16 +122,20 @@ const TextInput: FC<Props> = ({
 
 	useInput(
 		(input, key) => {
-			if (
-				key.upArrow ||
-				key.downArrow ||
-				(key.ctrl && input === 'c') ||
-				key.tab ||
-				(key.shift && key.tab)
-			) {
+			if (key.upArrow || key.downArrow || (key.ctrl && input === 'c')) {
 				return;
 			}
 
+			if (key.tab || (key.shift && key.tab)) {
+				if (tabComplete) {
+					if (value === placeholder) {
+						return;
+					}
+				} else {
+					return;
+				}
+			}
+
 			if (key.return) {
 				if (onSubmit) {
 					onSubmit(originalValue);
@@ -154,6 +164,11 @@ const TextInput: FC<Props> = ({
 
 					nextCursorOffset--;
 				}
+			} else if (key.tab) {
+				if (tabComplete && originalValue.length === 0) {
+					nextValue = placeholder;
+					nextCursorOffset += nextValue.length;
+				}
 			} else {
 				nextValue =
 					originalValue.slice(0, cursorOffset) +
@@ -200,11 +215,9 @@ const TextInput: FC<Props> = ({
 
 export default TextInput;
 
-export const UncontrolledTextInput: FC<Except<
-	Props,
-	'value' | 'onChange'
->> = props => {
-	const [value, setValue] = useState('');
+export const UncontrolledTextInput: FC<Except<Props, 'value' | 'onChange'>> =
+	props => {
+		const [value, setValue] = useState('');
 
-	return <TextInput {...props} value={value} onChange={setValue} />;
-};
+		return <TextInput {...props} value={value} onChange={setValue} />;
+	};

test.js

@@ -123,6 +123,40 @@ test('ignore input for Tab and Shift+Tab keys', async t => {
 	t.is(lastFrame(), CURSOR);
 });
 
+test('set value to placeholder with tabComplete', async t => {
+	const Test = () => {
+		const [value, setValue] = useState('');
+
+		return (
+			<TextInput
+				tabComplete
+				placeholder="test"
+				value={value}
+				onChange={setValue}
+			/>
+		);
+	};
+
+	const {stdin, lastFrame} = render(<Test />);
+
+	await delay(100);
+	stdin.write('\t');
+	await delay(100);
+	t.is(lastFrame(), `test${CURSOR}`);
+	stdin.write('\t');
+	await delay(100);
+	t.is(lastFrame(), `test${CURSOR}`);
+	stdin.write('\u001B[Z');
+	await delay(100);
+	t.is(lastFrame(), `test${CURSOR}`);
+	stdin.write(DELETE);
+	await delay(100);
+	t.is(lastFrame(), `tes${CURSOR}`);
+	stdin.write('\t');
+	await delay(100);
+	t.is(lastFrame(), `tes${CURSOR}`);
+});
+
 test('onSubmit', async t => {
 	const onSubmit = sinon.spy();