Fix undefined errors for focusing unmounted elements (#404)

Author: milesj

src/components/App.tsx

@@ -215,7 +215,7 @@ export default class App extends PureComponent<Props, State> {
 
 	focusNext = (): void => {
 		this.setState(previousState => {
-			const firstFocusableId = previousState.focusables[0].id;
+			const firstFocusableId = previousState.focusables[0]?.id;
 			const nextFocusableId = this.findNextFocusable(previousState);
 
 			return {
@@ -227,8 +227,7 @@ export default class App extends PureComponent<Props, State> {
 	focusPrevious = (): void => {
 		this.setState(previousState => {
 			const lastFocusableId =
-				previousState.focusables[previousState.focusables.length - 1].id;
-
+				previousState.focusables[previousState.focusables.length - 1]?.id;
 			const previousFocusableId = this.findPreviousFocusable(previousState);
 
 			return {
@@ -314,7 +313,7 @@ export default class App extends PureComponent<Props, State> {
 			index < state.focusables.length;
 			index++
 		) {
-			if (state.focusables[index].isActive) {
+			if (state.focusables[index]?.isActive) {
 				return state.focusables[index].id;
 			}
 		}
@@ -328,7 +327,7 @@ export default class App extends PureComponent<Props, State> {
 		});
 
 		for (let index = activeIndex - 1; index >= 0; index--) {
-			if (state.focusables[index].isActive) {
+			if (state.focusables[index]?.isActive) {
 				return state.focusables[index].id;
 			}
 		}

test/focus.tsx

@@ -12,6 +12,7 @@ const createStdin = () => {
 	stdin.setRawMode = spy();
 	stdin.setEncoding = () => {};
 	stdin.resume = () => {};
+	stdin.pause = () => {};
 
 	return stdin;
 };
@@ -23,6 +24,7 @@ interface TestProps {
 	disabled?: boolean;
 	focusNext?: boolean;
 	focusPrevious?: boolean;
+	unmountChildren?: boolean;
 }
 
 const Test: FC<TestProps> = ({
@@ -31,7 +33,8 @@ const Test: FC<TestProps> = ({
 	autoFocus = false,
 	disabled = false,
 	focusNext = false,
-	focusPrevious = false
+	focusPrevious = false,
+	unmountChildren = false
 }) => {
 	const focusManager = useFocusManager();
 
@@ -55,6 +58,10 @@ const Test: FC<TestProps> = ({
 		}
 	}, [focusPrevious]);
 
+	if (unmountChildren) {
+		return null;
+	}
+
 	return (
 		<Box flexDirection="column">
 			{showFirst && <Item label="First" autoFocus={autoFocus} />}
@@ -385,3 +392,35 @@ test('manually focus previous component', async t => {
 		['First', 'Second', 'Third ✔'].join('\n')
 	);
 });
+
+test('doesnt crash when focusing next on unmounted children', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+	const {rerender} = render(<Test autoFocus />, {
+		stdout,
+		stdin,
+		debug: true
+	});
+
+	await delay(100);
+	rerender(<Test focusNext unmountChildren />);
+	await delay(100);
+
+	t.is(stdout.write.lastCall.args[0], '');
+});
+
+test('doesnt crash when focusing previous on unmounted children', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+	const {rerender} = render(<Test autoFocus />, {
+		stdout,
+		stdin,
+		debug: true
+	});
+
+	await delay(100);
+	rerender(<Test focusPrevious unmountChildren />);
+	await delay(100);
+
+	t.is(stdout.write.lastCall.args[0], '');
+});