Fix: Only focus active elements (#631)

Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>

readme.md

@@ -1845,7 +1845,7 @@ const Example = () => {
 
 Switch focus to the next focusable component.
 If there's no active component right now, focus will be given to the first focusable component.
-If active component is the last in the list of focusable components, focus will be switched to the first component.
+If active component is the last in the list of focusable components, focus will be switched to the first active component.
 
 **Note:** Ink calls this method when user presses <kbd>Tab</kbd>.
 

src/components/App.tsx

@@ -250,7 +250,9 @@ export default class App extends PureComponent<Props, State> {
 
 	focusNext = (): void => {
 		this.setState(previousState => {
-			const firstFocusableId = previousState.focusables[0]?.id;
+			const firstFocusableId = previousState.focusables.find(
+				focusable => focusable.isActive
+			)?.id;
 			const nextFocusableId = this.findNextFocusable(previousState);
 
 			return {
@@ -261,8 +263,9 @@ export default class App extends PureComponent<Props, State> {
 
 	focusPrevious = (): void => {
 		this.setState(previousState => {
-			const lastFocusableId = previousState.focusables.at(-1)?.id;
-
+			const lastFocusableId = previousState.focusables.findLast(
+				focusable => focusable.isActive
+			)?.id;
 			const previousFocusableId = this.findPreviousFocusable(previousState);
 
 			return {

test/focus.tsx

@@ -28,7 +28,9 @@ const emitReadable = (stdin: NodeJS.WriteStream, chunk: string) => {
 
 type TestProps = {
 	readonly showFirst?: boolean;
+	readonly disableFirst?: boolean;
 	readonly disableSecond?: boolean;
+	readonly disableThird?: boolean;
 	readonly autoFocus?: boolean;
 	readonly disabled?: boolean;
 	readonly focusNext?: boolean;
@@ -38,7 +40,9 @@ type TestProps = {
 
 function Test({
 	showFirst = true,
+	disableFirst = false,
 	disableSecond = false,
+	disableThird = false,
 	autoFocus = false,
 	disabled = false,
 	focusNext = false,
@@ -73,9 +77,11 @@ function Test({
 
 	return (
 		<Box flexDirection="column">
-			{showFirst && <Item label="First" autoFocus={autoFocus} />}
+			{showFirst && (
+				<Item label="First" autoFocus={autoFocus} disabled={disableFirst} />
+			)}
 			<Item label="Second" autoFocus={autoFocus} disabled={disableSecond} />
-			<Item label="Third" autoFocus={autoFocus} />
+			<Item label="Third" autoFocus={autoFocus} disabled={disableThird} />
 		</Box>
 	);
 }
@@ -442,3 +448,60 @@ test('doesnt crash when focusing previous on unmounted children', async t => {
 
 	t.is((stdout.write as any).lastCall.args[0], '');
 });
+
+test('focuses first non-disabled component', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+	render(<Test autoFocus disableFirst disableSecond />, {
+		stdout,
+		stdin,
+		debug: true
+	});
+
+	await delay(100);
+
+	t.is(
+		(stdout.write as any).lastCall.args[0],
+		['First', 'Second', 'Third ✔'].join('\n')
+	);
+});
+
+test('skips disabled elements when wrapping around', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+	render(<Test autoFocus disableFirst />, {
+		stdout,
+		stdin,
+		debug: true
+	});
+
+	await delay(100);
+	emitReadable(stdin, '\t');
+	await delay(100);
+	emitReadable(stdin, '\t');
+	await delay(100);
+
+	t.is(
+		(stdout.write as any).lastCall.args[0],
+		['First', 'Second ✔', 'Third'].join('\n')
+	);
+});
+
+test('skips disabled elements when wrapping around from the front', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+	render(<Test autoFocus disableThird />, {
+		stdout,
+		stdin,
+		debug: true
+	});
+
+	await delay(100);
+	emitReadable(stdin, '\u001B[Z');
+	await delay(100);
+
+	t.is(
+		(stdout.write as any).lastCall.args[0],
+		['First', 'Second ✔', 'Third'].join('\n')
+	);
+});

tsconfig.json

@@ -9,7 +9,8 @@
 		],
 		"sourceMap": true,
 		"jsx": "react",
-		"isolatedModules": true
+		"isolatedModules": true,
+		"lib": ["ES2023"]
 	},
 	"include": ["src"],
 	"ts-node": {