[Form Provider Refactor] RoomNameInput fixes

src/components/Form/FormProvider.js

@@ -126,7 +126,7 @@ const FormProvider = forwardRef(
                 }
                 FormActions.setErrorFields(formID, null);
 
-                const validateErrors = validate(values) || {};
+                const validateErrors = validate(trimmedStringValues) || {};
 
                 // Validate the input for html tags. It should supercede any other error
                 _.each(trimmedStringValues, (inputValue, inputID) => {
@@ -155,6 +155,11 @@ const FormProvider = forwardRef(
                             }
                         }
                     }
+
+                    if (isMatch && leadingSpaceIndex === -1) {
+                        return;
+                    }
+
                     // Add a validation error here because it is a string value that contains HTML characters
                     validateErrors[inputID] = 'common.error.invalidCharacter';
                 });

src/components/RoomNameInput/roomNameInputPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropTypes from '@components/refPropTypes';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -14,7 +15,7 @@ const propTypes = {
     errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
 
     /** A ref forwarded to the TextInput */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
     inputID: PropTypes.string,

src/pages/settings/Report/RoomNamePage.js

@@ -4,7 +4,8 @@ import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -42,13 +43,8 @@ const defaultProps = {
     policy: {},
 };
 
-function RoomNamePage(props) {
+function RoomNamePage({policy, report, reports, translate}) {
     const styles = useThemeStyles();
-    const policy = props.policy;
-    const report = props.report;
-    const reports = props.reports;
-    const translate = props.translate;
-
     const roomNameInputRef = useRef(null);
     const isFocused = useIsFocused();
 
@@ -91,7 +87,7 @@ function RoomNamePage(props) {
                     title={translate('newRoomPage.roomName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
                     onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -100,14 +96,15 @@ function RoomNamePage(props) {
                     enabledWhenOffline
                 >
                     <View style={styles.mb4}>
-                        <RoomNameInput
-                            ref={(ref) => (roomNameInputRef.current = ref)}
+                        <InputWrapper
+                            InputComponent={RoomNameInput}
+                            ref={roomNameInputRef}
                             inputID="roomName"
                             defaultValue={report.reportName}
                             isFocused={isFocused}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -6,7 +6,8 @@ import _ from 'underscore';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import * as Illustrations from '@components/Icon/Illustrations';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
@@ -193,7 +194,15 @@ function WorkspaceNewRoomPage(props) {
         [props.reports],
     );
 
-    const workspaceOptions = useMemo(() => _.map(PolicyUtils.getActivePolicies(props.policies), (policy) => ({label: policy.name, key: policy.id, value: policy.id})), [props.policies]);
+    const workspaceOptions = useMemo(
+        () =>
+            _.map(PolicyUtils.getActivePolicies(props.policies), (policy) => ({
+                label: policy.name,
+                key: policy.id,
+                value: policy.id,
+            })),
+        [props.policies],
+    );
 
     const writeCapabilityOptions = useMemo(
         () =>
@@ -260,7 +269,7 @@ function WorkspaceNewRoomPage(props) {
                             // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                             keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                         >
-                            <Form
+                            <FormProvider
                                 formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                                 submitButtonText={translate('newRoomPage.createRoom')}
                                 style={[styles.mh5, styles.flexGrow1]}
@@ -269,7 +278,8 @@ function WorkspaceNewRoomPage(props) {
                                 enabledWhenOffline
                             >
                                 <View style={styles.mb5}>
-                                    <RoomNameInput
+                                    <InputWrapper
+                                        InputComponent={RoomNameInput}
                                         ref={inputCallbackRef}
                                         inputID="roomName"
                                         isFocused={props.isFocused}
@@ -278,7 +288,8 @@ function WorkspaceNewRoomPage(props) {
                                     />
                                 </View>
                                 <View style={styles.mb5}>
-                                    <TextInput
+                                    <InputWrapper
+                                        InputComponent={TextInput}
                                         inputID="welcomeMessage"
                                         label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                         accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -290,7 +301,8 @@ function WorkspaceNewRoomPage(props) {
                                     />
                                 </View>
                                 <View style={[styles.mhn5]}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="policyID"
                                         label={translate('workspace.common.workspace')}
                                         items={workspaceOptions}
@@ -299,7 +311,8 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                                 {isPolicyAdmin && (
                                     <View style={styles.mhn5}>
-                                        <ValuePicker
+                                        <InputWrapper
+                                            InputComponent={ValuePicker}
                                             inputID="writeCapability"
                                             label={translate('writeCapabilityPage.label')}
                                             items={writeCapabilityOptions}
@@ -309,7 +322,8 @@ function WorkspaceNewRoomPage(props) {
                                     </View>
                                 )}
                                 <View style={[styles.mb1, styles.mhn5]}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="visibility"
                                         label={translate('newRoomPage.visibility')}
                                         items={visibilityOptions}
@@ -318,7 +332,7 @@ function WorkspaceNewRoomPage(props) {
                                     />
                                 </View>
                                 <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                            </Form>
+                            </FormProvider>
                             {isSmallScreenWidth && <OfflineIndicator />}
                         </KeyboardAvoidingView>
                     )