[Form Provider Refactor] RoomNameInput fixes

src/components/Form/FormProvider.js

@@ -125,7 +125,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
             }
             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) => {
@@ -154,6 +154,11 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         }
                     }
                 }
+
+                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/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, shouldDelayFocus, prefixCharacter, ...restProps}) {
     const {translate} = useLocalize();
 
     const [selection, setSelection] = useState();
@@ -44,18 +44,19 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
 
     return (
         <TextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}
             accessibilityLabel={translate('newRoomPage.roomName')}
             role={CONST.ACCESSIBILITY_ROLE.TEXT}
-            prefixCharacter={CONST.POLICY.ROOM_PREFIX}
+            prefixCharacter={prefixCharacter}
             placeholder={translate('newRoomPage.social')}
             onChange={setModifiedRoomName}
             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)}
-            errorText={errorText}
             autoCapitalize="none"
             onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}

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, shouldDelayFocus, ...restProps}) {
     const {translate} = useLocalize();
 
     /**
@@ -29,6 +29,8 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
 
     return (
         <TextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}

src/components/RoomNameInput/roomNameInputPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import CONST from '@src/CONST';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -30,6 +31,9 @@ const propTypes = {
 
     /** Whether navigation is focused */
     isFocused: PropTypes.bool.isRequired,
+
+    /** Prefix character */
+    prefixCharacter: PropTypes.string,
 };
 
 const defaultProps = {
@@ -43,6 +47,7 @@ const defaultProps = {
     onBlur: () => {},
     autoFocus: false,
     shouldDelayFocus: false,
+    prefixCharacter: CONST.POLICY.ROOM_PREFIX,
 };
 
 export {propTypes, defaultProps};

src/libs/RoomNameInputUtils.ts

@@ -3,14 +3,14 @@ import CONST from '@src/CONST';
 /**
  * Replaces spaces with dashes
  */
-function modifyRoomName(roomName: string): string {
+function modifyRoomName(roomName: string, skipPolicyPrefix?: boolean): string {
     const modifiedRoomNameWithoutHash = roomName
         .replace(/ /g, '-')
 
         // Replaces the smart dash on iOS devices with two hyphens
         .replace(/—/g, '--');
 
-    return `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
+    return skipPolicyPrefix ? modifiedRoomNameWithoutHash : `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
 }
 
 export {

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

@@ -4,7 +4,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -190,7 +191,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(
         () =>
@@ -239,7 +248,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]}
@@ -248,7 +257,8 @@ function WorkspaceNewRoomPage(props) {
                             enabledWhenOffline
                         >
                             <View style={styles.mb5}>
-                                <RoomNameInput
+                                <InputWrapper
+                                    InputComponent={RoomNameInput}
                                     ref={inputCallbackRef}
                                     inputID="roomName"
                                     isFocused={props.isFocused}
@@ -257,7 +267,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <TextInput
+                                <InputWrapper
+                                    InputComponent={TextInput}
                                     inputID="welcomeMessage"
                                     label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                     accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -269,7 +280,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={[styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="policyID"
                                     label={translate('workspace.common.workspace')}
                                     items={workspaceOptions}
@@ -278,7 +290,8 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             {isPolicyAdmin && (
                                 <View style={styles.mhn5}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="writeCapability"
                                         label={translate('writeCapabilityPage.label')}
                                         items={writeCapabilityOptions}
@@ -288,7 +301,8 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                             )}
                             <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="visibility"
                                     label={translate('newRoomPage.visibility')}
                                     items={visibilityOptions}
@@ -297,7 +311,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
+                        </FormProvider>
                         {isSmallScreenWidth && <OfflineIndicator />}
                     </KeyboardAvoidingView>
                 )}