Fix form submit behavior

src/components/Form/FormProvider.tsx

@@ -1,6 +1,7 @@
 import lodashIsEqual from 'lodash/isEqual';
 import type {ForwardedRef, MutableRefObject, ReactNode} from 'react';
 import React, {createRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import type {NativeSyntheticEvent, TextInputSubmitEditingEventData} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -204,7 +205,7 @@ function FormProvider(
     }));
 
     const registerInput = useCallback<RegisterInput>(
-        <TInputProps extends BaseInputProps>(inputID: keyof Form, inputProps: TInputProps): TInputProps => {
+        <TInputProps extends BaseInputProps>(inputID: keyof Form, shouldSubmitForm: boolean, inputProps: TInputProps): TInputProps => {
             const newRef: MutableRefObject<BaseInputProps> = inputRefs.current[inputID] ?? inputProps.ref ?? createRef();
             if (inputRefs.current[inputID] !== newRef) {
                 inputRefs.current[inputID] = newRef;
@@ -232,6 +233,14 @@ function FormProvider(
 
             return {
                 ...inputProps,
+                ...(shouldSubmitForm && {
+                    onSubmitEditing: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+                        submit();
+
+                        inputProps.onSubmitEditing?.(event);
+                    },
+                    returnKeyType: 'go',
+                }),
                 ref:
                     typeof inputRef === 'function'
                         ? (node: BaseInputProps) => {
@@ -319,7 +328,7 @@ function FormProvider(
                 },
             };
         },
-        [draftValues, formID, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
+        [draftValues, inputValues, formState?.errorFields, errors, submit, setTouchedInput, shouldValidateOnBlur, onValidate, hasServerError, formID, shouldValidateOnChange],
     );
     const value = useMemo(() => ({registerInput}), [registerInput]);
 

src/components/Form/FormWrapper.tsx

@@ -5,7 +5,7 @@ import {Keyboard, ScrollView} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import FormSubmit from '@components/FormSubmit';
+import FormElement from '@components/FormElement';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import type {SafeAreaChildrenProps} from '@components/SafeAreaConsumer/types';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
@@ -94,11 +94,10 @@ function FormWrapper({
 
     const scrollViewContent = useCallback(
         (safeAreaPaddingBottomStyle: SafeAreaChildrenProps['safeAreaPaddingBottomStyle']) => (
-            <FormSubmit
+            <FormElement
                 key={formID}
                 ref={formContentRef}
                 style={[style, safeAreaPaddingBottomStyle]}
-                onSubmit={onSubmit}
             >
                 {children}
                 {isSubmitButtonVisible && (
@@ -116,7 +115,7 @@ function FormWrapper({
                         disablePressOnEnter={disablePressOnEnter}
                     />
                 )}
-            </FormSubmit>
+            </FormElement>
         ),
         [
             children,

src/components/Form/InputWrapper.tsx

@@ -1,21 +1,66 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useContext} from 'react';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import RoomNameInput from '@components/RoomNameInput';
 import TextInput from '@components/TextInput';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import FormContext from './FormContext';
 import type {InputWrapperProps, ValidInputs} from './types';
 
-function InputWrapper<TInput extends ValidInputs>({InputComponent, inputID, valueType = 'string', ...rest}: InputWrapperProps<TInput>, ref: ForwardedRef<AnimatedTextInputRef>) {
+const textInputBasedComponents: ValidInputs[] = [TextInput, RoomNameInput];
+
+function computeComponentSpecificRegistrationParams<TInput extends ValidInputs>({
+    InputComponent,
+    shouldSubmitForm,
+    multiline,
+    autoGrowHeight,
+    blurOnSubmit,
+}: InputWrapperProps<TInput>): {
+    readonly shouldSubmitForm: boolean;
+    readonly blurOnSubmit: boolean | undefined;
+    readonly shouldSetTouchedOnBlurOnly: boolean;
+} {
+    if (textInputBasedComponents.includes(InputComponent)) {
+        const isEffectivelyMultiline = Boolean(multiline) || Boolean(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 ? Boolean(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: false,
+    };
+}
+
+function InputWrapper<TInput extends ValidInputs>(props: InputWrapperProps<TInput>, ref: ForwardedRef<AnimatedTextInputRef>) {
+    const {InputComponent, inputID, valueType = 'string', shouldSubmitForm: propShouldSubmitForm, ...rest} = props;
     const {registerInput} = useContext(FormContext);
-    // 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.
-    const shouldSetTouchedOnBlurOnly = InputComponent === TextInput;
+
+    const {shouldSetTouchedOnBlurOnly, blurOnSubmit, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props);
 
     // 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, @typescript-eslint/no-explicit-any
-    return <InputComponent {...(registerInput(inputID, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly}) as any)} />;
+    return <InputComponent {...(registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit}) as any)} />;
 }
 
 InputWrapper.displayName = 'InputWrapper';

src/components/Form/types.ts

@@ -1,5 +1,5 @@
 import type {ComponentProps, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react';
-import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
 import type AddressSearch from '@components/AddressSearch';
 import type AmountTextInput from '@components/AmountTextInput';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
@@ -40,12 +40,22 @@ type BaseInputProps = {
     isFocused?: boolean;
     measureLayout?: (ref: unknown, callback: MeasureLayoutOnSuccessCallback) => void;
     focus?: () => void;
+    multiline?: boolean;
+    autoGrowHeight?: boolean;
+    blurOnSubmit?: boolean;
+    onSubmitEditing?: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
 };
 
 type InputWrapperProps<TInput extends ValidInputs> = Omit<BaseInputProps, 'ref'> &
     ComponentProps<TInput> & {
         InputComponent: TInput;
         inputID: string;
+
+        /**
+         * Should the containing form be submitted when this input is submitted itself?
+         * Currently, meaningful only for text inputs.
+         */
+        shouldSubmitForm?: boolean;
     };
 
 type ExcludeDraft<T> = T extends `${string}Draft` ? never : T;
@@ -89,7 +99,7 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     disablePressOnEnter?: boolean;
 };
 
-type RegisterInput = <TInputProps extends BaseInputProps>(inputID: keyof Form, inputProps: TInputProps) => TInputProps;
+type RegisterInput = <TInputProps extends BaseInputProps>(inputID: keyof Form, shouldSubmitForm: boolean, inputProps: TInputProps) => TInputProps;
 
 type InputRefs = Record<string, MutableRefObject<BaseInputProps>>;
 

src/components/RoomNameInput/index.js

@@ -6,7 +6,7 @@ import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, onSubmitEditing, returnKeyType, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     const [selection, setSelection] = useState();
@@ -52,6 +52,8 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
             selection={selection}
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
+            onSubmitEditing={onSubmitEditing}
+            returnKeyType={returnKeyType}
             errorText={errorText}
             autoCapitalize="none"
             onBlur={(event) => isFocused && onBlur(event)}

src/components/RoomNameInput/index.native.js

@@ -7,7 +7,7 @@ import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, onSubmitEditing, returnKeyType, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     /**
@@ -42,6 +42,8 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
             onBlur={(event) => isFocused && onBlur(event)}
+            onSubmitEditing={onSubmitEditing}
+            returnKeyType={returnKeyType}
             autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}

src/components/RoomNameInput/roomNameInputPropTypes.js

@@ -17,6 +17,12 @@ const propTypes = {
     /** A ref forwarded to the TextInput */
     forwardedRef: refPropTypes,
 
+    /** On submit editing handler provided by the FormProvider */
+    onSubmitEditing: PropTypes.func,
+
+    /** Return key type provided to the TextInput  */
+    returnKeyType: PropTypes.string,
+
     /** The ID used to uniquely identify the input in a Form */
     inputID: PropTypes.string,
 
@@ -39,6 +45,8 @@ const defaultProps = {
     disabled: false,
     errorText: '',
     forwardedRef: () => {},
+    onSubmitEditing: () => {},
+    returnKeyType: undefined,
 
     inputID: undefined,
     onBlur: () => {},

src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js

@@ -89,9 +89,6 @@ const propTypes = {
     /** Whether we should wait before focusing the TextInput, useful when using transitions  */
     shouldDelayFocus: PropTypes.bool,
 
-    /** Indicate whether pressing Enter on multiline input is allowed to submit the form. */
-    submitOnEnter: PropTypes.bool,
-
     /** Indicate whether input is multiline */
     multiline: PropTypes.bool,
 
@@ -132,7 +129,6 @@ const defaultProps = {
     prefixCharacter: '',
     onInputChange: () => {},
     shouldDelayFocus: false,
-    submitOnEnter: false,
     icon: null,
     shouldUseDefaultValue: false,
     multiline: false,

src/components/TextInput/BaseTextInput/index.native.tsx

@@ -51,7 +51,6 @@ function BaseTextInput(
         hint = '',
         onInputChange = () => {},
         shouldDelayFocus = false,
-        submitOnEnter = false,
         multiline = false,
         shouldInterceptSwipe = false,
         autoCorrect = true,
@@ -376,9 +375,6 @@ function BaseTextInput(
                                 selection={inputProps.selection}
                                 readOnly={isReadOnly}
                                 defaultValue={defaultValue}
-                                // FormSubmit Enter key handler does not have access to direct props.
-                                // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback.
-                                dataSet={{submitOnEnter: isMultiline && submitOnEnter}}
                             />
                             {inputProps.isLoading && (
                                 <ActivityIndicator