Skip to content

Fix/73175b - Empty space instead of keyboard if backgrounding app while creating expense #76281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Julesssss merged 4 commits into from
Dec 8, 2025
+18 −3
Merged

Fix/73175b - Empty space instead of keyboard if backgrounding app while creating expense #76281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
765cd32
Fix - Empty space instead of keyboard if backgrounding app while crea…
dmkt9 Nov 28, 2025
a1b7a63
Merge branch 'main' into fix/73175b
dmkt9 Dec 5, 2025
897db36
Fix - Empty space instead of keyboard if backgrounding app while crea…
dmkt9 Dec 5, 2025
eaec67c
Fix - Empty space instead of keyboard if backgrounding app while crea…
dmkt9 Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/AmountTextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEvent, TextInputSelectionChangeEvent, TextStyle, ViewStyle} from 'react-native';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -59,6 +60,8 @@ function AmountTextInput({
ref,
...rest
}: AmountTextInputProps) {
const navigation = useNavigation();

return (
<TextInput
autoGrow
Expand Down Expand Up @@ -88,6 +91,7 @@ function AmountTextInput({
disableKeyboardShortcuts
shouldUseFullInputHeight
shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
navigation={navigation}
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}
/>
Expand Down
6 changes: 6 additions & 0 deletions src/components/TextInput/BaseTextInput/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type {MarkdownRange, MarkdownStyle} from '@expensify/react-native-live-markdown';
import type {NavigationProp, NavigationState} from '@react-navigation/native';
import type {ForwardedRef} from 'react';
import type {GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native';
import type {MaskedTextInputOwnProps} from 'react-native-advanced-input-mask/lib/typescript/src/types';
Expand Down Expand Up @@ -194,6 +195,11 @@ type CustomBaseTextInputProps = ForwardedFSClassProps & {

/** Reference to the outer element */
ref?: ForwardedRef<BaseTextInputRef>;

/** When the `disableKeyboard` prop is passed with the value `true`, we need to pass the `navigation` prop from `useNavigation` to ensure that the `disableKeyboard` functionality works correctly when the application is in the background */
navigation?: Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
getState(): NavigationState | undefined;

@dominictb dominictb Dec 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to redefine getState here? Also please add prop JSDoc comment.

@dmkt9 dmkt9 Dec 5, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I didn’t look into why it needs to redefine getState; I just took it from the type of useNavigation 😄:

export function useNavigation<
  T = Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
    getState(): NavigationState | undefined;
  },
>(): T {

};
};

type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
Expand Down
11 changes: 8 additions & 3 deletions src/components/TextInput/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import React, {useEffect} from 'react';
import {AppState, Keyboard} from 'react-native';
import useThemeStyles from '@hooks/useThemeStyles';
import Log from '@libs/Log';
import BaseTextInput from './BaseTextInput';
import type {BaseTextInputProps} from './BaseTextInput/types';

function TextInput({ref, ...props}: BaseTextInputProps) {
function TextInput({ref, navigation, ...props}: BaseTextInputProps) {
const styles = useThemeStyles();

useEffect(() => {
if (!props.disableKeyboard) {
return;
}

if (!navigation) {
Log.warn('disableKeyboard is enabled, but "navigation" isn\'t passed to the TextInput component!');

@dominictb dominictb Dec 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you check similar places with enabled disableKeyboard where the bug can be reproduced and pass navigation accordingly?

@dmkt9 dmkt9 Dec 5, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I reviewed everything when creating this PR, and I added this log to ensure that nothing gets missed in the future.

}

const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
if (!nextAppState.match(/inactive|background/)) {
if (!nextAppState.match(/inactive|background/) || (navigation && !navigation.isFocused())) {
return;
}

Expand All @@ -23,7 +28,7 @@ function TextInput({ref, ...props}: BaseTextInputProps) {
return () => {
appStateSubscription.remove();
};
}, [props.disableKeyboard]);
}, [props.disableKeyboard, navigation]);

return (
<BaseTextInput
Expand Down
Loading