[Due for payment 2026-01-07] [$1000] Migrate deprecated blurOnSubmit to submitBehavior

[roryabraham]

Problem

React Native has deprecated the blurOnSubmit prop for TextInput, and it will be removed in a future version. However, we have several usages of blurOnSubmit left in the app.

Solution

Migrate these usages to use the replacement prop submitBehavior instead.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021983603551000325833
• Upwork Job ID: 1983603551000325833
• Last Price Increase: 2025-12-26
• Automatic offers:
• daledah | Contributor | 109342274

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021983603551000325833

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[roryabraham]

Just to get ahead of this question, this is not an issue that will be assigned on the basis of "dibs". I want to review detailed proposals on what we will have to change, a rollout plan, and what tests we will need to perform to validate our changes as we go.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Migrate

What is the root cause of that problem?

improvement

What changes do you think we should make in order to solve the problem?

1. Update type definition in types file to remove blurOnSubmit and add submitBehavior

    submitBehavior?: 'submit' | 'blurAndSubmit' | 'newline';

App/src/pages/signin/LoginForm/types.ts

Lines 7 to 8 in 9d30cbc

	/** Should we dismiss the keyboard when transitioning away from the page? */
	blurOnSubmit?: boolean;

App/src/components/Form/types.ts

Line 124 in 9d30cbc

blurOnSubmit?: boolean;

type ComputedComponentSpecificRegistrationParams = {
    shouldSubmitForm: boolean;
    shouldSetTouchedOnBlurOnly: boolean;
    submitBehavior: 'submit' | 'blurAndSubmit' | 'newline' | undefined;
};

App/src/components/Form/InputWrapper.tsx

Lines 17 to 21 in 9d30cbc

	type ComputedComponentSpecificRegistrationParams = {
	shouldSubmitForm: boolean;
	shouldSetTouchedOnBlurOnly: boolean;
	blurOnSubmit: boolean | undefined;
	};

...

2. With blurOnSubmit prop is false we can use submitBehavior="submit" instread of

    submitBehavior="submit"

App/src/components/AmountTextInput.tsx

Line 78 in 9d30cbc

submitBehavior="submit"

With blurOnSubmit prop is true, we can use submitBehavior="blurAndSubmit"

    submitBehavior={isAccountValidated === false ? 'blurAndSubmit' : 'submit'}

App/src/pages/signin/SignInPage.tsx

Line 315 in 9d30cbc

blurOnSubmit={isAccountValidated === false}

We can do the same with other places that use blurOnSubmit props

3. Then update the usage of blurOnSubmit like

    if (submitBehavior === 'blurAndSubmit') {
        input.current?.blur();
    }

App/src/pages/signin/LoginForm/BaseLoginForm.tsx

Lines 178 to 180 in 9d30cbc

	if (blurOnSubmit) {
	input.current?.blur();
	}

    submitBehavior: (isEffectivelyMultiline && shouldReallySubmitForm) ? 'blurAndSubmit' : submitBehavior,

App/src/components/Form/InputWrapper.tsx

Line 49 in 9d30cbc

blurOnSubmit: (isEffectivelyMultiline && shouldReallySubmitForm) || blurOnSubmit,

        const {shouldSetTouchedOnBlurOnly, submitBehavior, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props as InputComponentBaseProps);
    // eslint-disable-next-line react-compiler/react-compiler
    const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, submitBehavior});

App/src/components/Form/InputWrapper.tsx

Lines 83 to 85 in 9d30cbc

	const {shouldSetTouchedOnBlurOnly, blurOnSubmit, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props as InputComponentBaseProps);
	// eslint-disable-next-line react-compiler/react-compiler
	const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit});

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[daledah]

to make it easier to test, this is the test branch

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

React Native is retiring the blurOnSubmit prop on TextInput. Our app still sets that prop in shared form helpers and a few screens, so we keep hitting the deprecation warning and we risk a crash once the prop is removed. We need to swap every remaining usage over to submitBehavior.

What is the root cause of that problem?

• Our form wrapper derives and forwards blurOnSubmit, so every controlled text field rendered through it keeps the deprecated prop in place:

  App/src/components/Form/InputWrapper.tsx

  Lines 17 to 95 in 9d30cbc

  	type ComputedComponentSpecificRegistrationParams = {
  	shouldSubmitForm: boolean;
  	shouldSetTouchedOnBlurOnly: boolean;
  	blurOnSubmit: boolean | undefined;
  	};
  	function computeComponentSpecificRegistrationParams({
  	InputComponent,
  	shouldSubmitForm,
  	multiline,
  	autoGrowHeight,
  	blurOnSubmit,
  	}: InputComponentBaseProps): ComputedComponentSpecificRegistrationParams {
  	if (textInputBasedComponents.includes(InputComponent)) {
  	const isEffectivelyMultiline = !!multiline || !!autoGrowHeight;
  	// If the user can use the hardware keyboard, they have access to an alternative way of inserting a new line
  	// (like a Shift+Enter keyboard shortcut). For simplicity, we assume that when there's no touch screen, it's a
  	// desktop setup with a keyboard.
  	const canUseHardwareKeyboard = !canUseTouchScreen();
  	// We want to avoid a situation when the user can't insert a new line. For single-line inputs, it's not a problem and we
  	// force-enable form submission. For multi-line inputs, ensure that it was requested to enable form submission for this specific
  	// input and that alternative ways exist to add a new line.
  	const shouldReallySubmitForm = isEffectivelyMultiline ? !!shouldSubmitForm && canUseHardwareKeyboard : true;
  	return {
  	// There are inputs that don't have onBlur methods, to simulate the behavior of onBlur in e.g. checkbox, we had to
  	// use different methods like onPress. This introduced a problem that inputs that have the onBlur method were
  	// calling some methods too early or twice, so we had to add this check to prevent that side effect.
  	// For now this side effect happened only in `TextInput` components.
  	shouldSetTouchedOnBlurOnly: true,
  	blurOnSubmit: (isEffectivelyMultiline && shouldReallySubmitForm) || blurOnSubmit,
  	shouldSubmitForm: shouldReallySubmitForm,
  	};
  	}
  	return {
  	shouldSetTouchedOnBlurOnly: false,
  	// Forward the originally provided value
  	blurOnSubmit,
  	shouldSubmitForm: !!shouldSubmitForm,
  	};
  	}
  	type InputWrapperProps<TInput extends ValidInputs, TValue extends ValueTypeKey = ValueTypeKey> = ComponentPropsWithoutRef<TInput> &
  	InputComponentValueProps<TValue> &
  	ForwardedFSClassProps & {
  	InputComponent: TInput;
  	inputID: string;
  	isFocused?: boolean;
  	/**
  	* Should the containing form be submitted when this input is submitted itself?
  	* Currently, meaningful only for text inputs.
  	*/
  	shouldSubmitForm?: boolean;
  	/** Reference to the outer element */
  	ref?: ForwardedRef<AnimatedTextInputRef>;
  	};
  	function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>({ref, ...props}: InputWrapperProps<TInput, TValue>) {
  	const {InputComponent, inputID, valueType = 'string', shouldSubmitForm: propShouldSubmitForm, ...rest} = props as InputComponentBaseProps;
  	const {registerInput} = useContext(FormContext);
  	const {shouldSetTouchedOnBlurOnly, blurOnSubmit, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props as InputComponentBaseProps);
  	// eslint-disable-next-line react-compiler/react-compiler
  	const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit});
  	return (
  	<InputComponent
  	key={key}
  	// TODO: Sometimes we return too many props with register input, so we need to consider if it's better to make the returned type more general and disregard the issue, or we would like to omit the unused props somehow.
  	// eslint-disable-next-line react/jsx-props-no-spreading
  	{...registerInputProps}
  	/>
  	);
  	}

• Emoji search inputs continue to pass blurOnSubmit directly to <TextInput> on both platforms:

  App/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

  Lines 120 to 148 in 9d30cbc

  	return (
  	<View style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(shouldUseNarrowLayout)]}>
  	<View style={[styles.p4, styles.pb3]}>
  	<TextInput
  	label={translate('common.search')}
  	accessibilityLabel={translate('common.search')}
  	role={CONST.ROLE.PRESENTATION}
  	onChangeText={filterEmojis}
  	blurOnSubmit={filteredEmojis.length > 0}
  	/>
  	</View>
  	<BaseEmojiPickerMenu
  	isFiltered={isListFiltered}
  	headerEmojis={headerEmojis}
  	scrollToHeader={scrollToHeader}
  	listWrapperStyle={[
  	listStyle,
  	{
  	width: Math.floor(windowWidth),
  	},
  	]}
  	ref={emojiListRef}
  	data={filteredEmojis}
  	renderItem={renderItem}
  	extraData={[filteredEmojis, preferredSkinTone]}
  	stickyHeaderIndices={headerIndices}
  	alwaysBounceVertical={filteredEmojis.length !== 0}
  	/>
  	</View>

  and

  App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx

  Lines 330 to 345 in 9d30cbc

  	label={translate('common.search')}
  	accessibilityLabel={translate('common.search')}
  	role={CONST.ROLE.PRESENTATION}
  	onChangeText={filterEmojis}
  	defaultValue=""
  	ref={searchInputRef}
  	autoFocus={shouldFocusInputOnScreenFocus}
  	onFocus={() => {
  	setFocusedIndex(-1);
  	setIsFocused(true);
  	setIsUsingKeyboardMovement(false);
  	}}
  	onBlur={() => setIsFocused(false)}
  	autoCorrect={false}
  	blurOnSubmit={filteredEmojis.length > 0}
  	/>

  .
• The sign-in flow still threads a blurOnSubmit flag from the page into the form so it can blur the login box after submit:

  App/src/pages/signin/SignInPage.tsx

  Lines 312 to 318 in 9d30cbc

  	<LoginForm
  	ref={loginFormRef}
  	isVisible={shouldShowLoginForm}
  	blurOnSubmit={isAccountValidated === false}
  	// eslint-disable-next-line react-compiler/react-compiler
  	scrollPageToTop={signInPageLayoutRef.current?.scrollPageToTop}
  	/>

  and

  App/src/pages/signin/LoginForm/BaseLoginForm.tsx

  Lines 69 to 118 in 9d30cbc

  	}
  	const phoneLogin = appendCountryCode(getPhoneNumberWithoutSpecialChars(loginTrim), countryCode);
  	const parsedPhoneNumber = parsePhoneNumber(phoneLogin);
  	if (!Str.isValidEmail(loginTrim) && !parsedPhoneNumber.possible) {
  	if (isNumericWithSpecialChars(loginTrim)) {
  	setFormError('common.error.phoneNumber');
  	} else {
  	setFormError('loginForm.error.invalidFormatEmailLogin');
  	}
  	return false;
  	}
  	setFormError(undefined);
  	return true;
  	},
  	[setFormError, countryCode],
  	);
  	/**
  	* Handle text input and validate the text input if it is blurred
  	*/
  	const onTextInput = useCallback(
  	(text: string) => {
  	setLogin(text);
  	if (firstBlurred.current) {
  	validate(text);
  	}
  	if (!!account?.errors || !!account?.message) {
  	clearAccountMessages();
  	}
  	// Clear the "Account successfully closed" message when the user starts typing
  	if (closeAccount?.success && !isInputAutoFilled(input.current)) {
  	setDefaultData();
  	}
  	},
  	[account, closeAccount, input, setLogin, validate],
  	);
  	function getSignInWithStyles() {
  	return shouldUseNarrowLayout ? [styles.mt1] : [styles.mt5, styles.mb5];
  	}
  	/**
  	* Check that all the form fields are valid, then trigger the submit callback
  	*/
  	const validateAndSubmitForm = useCallback(() => {

• Our contributor guide also points readers to use blurOnSubmit, so we can update that as well:

  App/contributingGuides/APPLE_GOOGLE_SIGNIN.md

  Lines 101 to 120 in 9d30cbc

  	The Apple/Google Sign In button renders differently in development mode. To prevent confusion
  	for developers about a possible regression, we decided to not render third party buttons in
  	development mode.
  	To re-enable the SSO buttons in development mode, remove this [condition](https://github.com/Expensify/App/blob/c2a718c9100e704c89ad9564301348bc53a49777/src/pages/signin/LoginForm/BaseLoginForm.tsx#L300) so that we always render the SSO button components:
  	```diff
  	diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx
  	index 4286a26033..850f8944ca 100644
  	--- a/src/pages/signin/LoginForm/BaseLoginForm.tsx
  	+++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx
  	@@ -288,7 +288,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
  	// for developers about possible regressions, we won't render buttons in development mode.
  	// For more information about these differences and how to test in development mode,
  	// see`Expensify/App/contributingGuides/APPLE_GOOGLE_SIGNIN.md`
  	- CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (
  	+ (
  	<View style={[getSignInWithStyles()]}>
  	<Text
  	accessibilityElementsHidden

What changes do you think we should make in order to solve the problem?

We will replace the boolean prop with the new submitBehavior string everywhere we render or wrap a text input. The form layer will take care of mapping existing multi-line handling to the closest submitBehavior value ('blurAndSubmit', 'newline', or 'submit'). Feature code that used to toggle blurOnSubmit will now set the right submitBehavior and will read that value when it needs to force a blur.

• Update InputComponentBaseProps and the form wrapper to have submitBehavior?: SubmitBehavior instead of blurOnSubmit?: boolean, and keep the current submission defaults when no value is provided.
• Adjust the shared computeComponentSpecificRegistrationParams helper to resolve a submit behavior based on the current flags (multiline, hardware keyboard, should-submit) so that multi-line inputs still submit only when we can blur safely.
• Pass the resolved submitBehavior down through registerInput and into the rendered TextInput.
• Swap every feature-level usage (EmojiPicker, sign-in flow etc.) to send a string instead of a boolean, choosing 'blurAndSubmit' when the old code wanted a blur and 'submit' otherwise.
• Update the contributor guide example so new contributions use submitBehavior.

// src/components/Form/InputWrapper.tsx
import type {SubmitBehavior} from 'react-native';

type ComputedComponentSpecificRegistrationParams = {
    shouldSubmitForm: boolean;
    shouldSetTouchedOnBlurOnly: boolean;
    submitBehavior?: SubmitBehavior;
};

function computeComponentSpecificRegistrationParams({
    InputComponent,
    shouldSubmitForm,
    multiline,
    autoGrowHeight,
    submitBehavior,
}: InputComponentBaseProps): ComputedComponentSpecificRegistrationParams {
    if (textInputBasedComponents.includes(InputComponent)) {
        const isEffectivelyMultiline = !!multiline || !!autoGrowHeight;
        const canUseHardwareKeyboard = !canUseTouchScreen();
        const shouldReallySubmitForm = isEffectivelyMultiline ? !!shouldSubmitForm && canUseHardwareKeyboard : true;

        const resolvedSubmitBehavior: SubmitBehavior =
            submitBehavior ??
            (isEffectivelyMultiline
                ? shouldReallySubmitForm
                    ? 'blurAndSubmit'
                    : 'newline'
                : 'blurAndSubmit');

        return {
            shouldSetTouchedOnBlurOnly: true,
            submitBehavior: resolvedSubmitBehavior,
            shouldSubmitForm: shouldReallySubmitForm,
        };
    }

    return {
        shouldSetTouchedOnBlurOnly: false,
        submitBehavior,
        shouldSubmitForm: !!shouldSubmitForm,
    };
}

const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {
    ref,
    valueType,
    ...rest,
    shouldSetTouchedOnBlurOnly,
    submitBehavior,
});

Rollout plan:

• After merge, check on staging for screens that previously toggled blurOnSubmit (emoji picker, login).
• Verify we no longer see blurOnSubmit deprecation warnings in development builds after the code is merged.
• Maybe put a Slack message about the change so folks can update any on-going changes.
• If needed, we can first start with a few places, then once that is well tested in staging and prod, then continue the migration for other places.

Testing:

• Sign-in submit flow on web/desktop and native (keyboard dismiss + submit behaviour).
• Emoji picker search (Enter key behaviour and focus retention).
• Other places that previously relied on blurOnSubmit (like multi-line fields).