[Form Provider Refactor] RoomNameInput

src/components/Form/FormProvider.js

@@ -227,13 +227,15 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     .first()
                     .value() || '';
 
+            const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
+
             return {
                 ...propsToParse,
                 ref: newRef,
                 inputID,
                 key: propsToParse.key || inputID,
                 errorText: errors[inputID] || fieldErrorMessage,
-                value: inputValues[inputID],
+                value,
                 // As the text input is controlled, we never set the defaultValue prop
                 // as this is already happening by the value prop.
                 defaultValue: undefined,
@@ -273,13 +275,19 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         propsToParse.onBlur(event);
                     }
                 },
-                onInputChange: (value, key) => {
+                onInputChange: (inputValue, key) => {
                     const inputKey = key || inputID;
                     setInputValues((prevState) => {
-                        const newState = {
-                            ...prevState,
-                            [inputKey]: value,
-                        };
+                        const newState = _.isFunction(propsToParse.valueParser)
+                            ? {
+                                  ...prevState,
+                                  [inputKey]: propsToParse.valueParser(inputValue),
+                                  [`${inputKey}ToDisplay`]: inputValue,
+                              }
+                            : {
+                                  ...prevState,
+                                  [inputKey]: inputValue,
+                              };
 
                         if (shouldValidateOnChange) {
                             onValidate(newState);
@@ -288,11 +296,11 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     });
 
                     if (propsToParse.shouldSaveDraft) {
-                        FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value});
+                        FormActions.setDraftValues(propsToParse.formID, {[inputKey]: inputValue});
                     }
 
                     if (_.isFunction(propsToParse.onValueChange)) {
-                        propsToParse.onValueChange(value, inputKey);
+                        propsToParse.onValueChange(inputValue, inputKey);
                     }
                 },
             };

src/components/Form/InputWrapper.js

@@ -7,11 +7,13 @@ const propTypes = {
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
     forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    valueParser: PropTypes.func,
 };
 
 const defaultProps = {
     forwardedRef: undefined,
     valueType: 'string',
+    valueParser: undefined,
 };
 
 function InputWrapper(props) {

src/components/RoomNameInput/index.js

@@ -1,68 +1,40 @@
-import React, {useState} from 'react';
-import _ from 'underscore';
+import React from 'react';
 import CONST from '../../CONST';
 import TextInput from '../TextInput';
 import useLocalize from '../../hooks/useLocalize';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
+import InputWrapper from '../Form/InputWrapper';
+import getOperatingSystem from '../../libs/getOperatingSystem';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID}) {
     const {translate} = useLocalize();
 
-    const [selection, setSelection] = useState();
+    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
 
-    /**
-     * Calls the onChangeText callback with a modified room name
-     * @param {Event} event
-     */
-    const setModifiedRoomName = (event) => {
-        const roomName = event.nativeEvent.text;
-        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
-        onChangeText(modifiedRoomName);
-
-        // if custom component has onInputChange, use it to trigger changes (Form input)
-        if (_.isFunction(onInputChange)) {
-            onInputChange(modifiedRoomName);
-        }
-
-        // Prevent cursor jump behaviour:
-        // Check if newRoomNameWithHash is the same as modifiedRoomName
-        // If it is then the room name is valid (does not contain unallowed characters); no action required
-        // If not then the room name contains unvalid characters and we must adjust the cursor position manually
-        // Read more: https://github.com/Expensify/App/issues/12741
-        const oldRoomNameWithHash = value || '';
-        const newRoomNameWithHash = `${CONST.POLICY.ROOM_PREFIX}${roomName}`;
-        if (modifiedRoomName !== newRoomNameWithHash) {
-            const offset = modifiedRoomName.length - oldRoomNameWithHash.length;
-            const newSelection = {
-                start: selection.start + offset,
-                end: selection.end + offset,
-            };
-            setSelection(newSelection);
-        }
-    };
+    const valueParser = (roomName) => RoomNameInputUtils.modifyRoomName(roomName);
 
     return (
-        <TextInput
+        <InputWrapper
+            InputComponent={TextInput}
+            inputID={inputID}
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}
             accessibilityLabel={translate('newRoomPage.roomName')}
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
             prefixCharacter={CONST.POLICY.ROOM_PREFIX}
             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}
+            valueParser={valueParser}
             autoCapitalize="none"
             onBlur={() => isFocused && onBlur()}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
             shouldInterceptSwipe
+            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
         />
     );
 }

src/components/RoomNameInput/roomNameInputPropTypes.js

@@ -18,7 +18,7 @@ const propTypes = {
     forwardedRef: PropTypes.func,
 
     /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string,
+    inputID: PropTypes.string.isRequired,
 
     /** Callback that is called when the text input is blurred */
     onBlur: PropTypes.func,
@@ -39,7 +39,6 @@ const defaultProps = {
     errorText: '',
     forwardedRef: () => {},
 
-    inputID: undefined,
     onBlur: () => {},
     autoFocus: false,
     shouldDelayFocus: false,

src/pages/settings/Report/RoomNamePage.js

@@ -7,7 +7,6 @@ import CONST from '../../../CONST';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Form from '../../../components/Form';
 import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import Navigation from '../../../libs/Navigation/Navigation';
@@ -21,6 +20,7 @@ import * as Report from '../../../libs/actions/Report';
 import RoomNameInput from '../../../components/RoomNameInput';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
+import FormProvider from '../../../components/Form/FormProvider';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -90,7 +90,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)}
@@ -106,7 +106,7 @@ function RoomNamePage(props) {
                             isFocused={isFocused}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -20,13 +20,14 @@ import * as ErrorUtils from '../../libs/ErrorUtils';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PolicyUtils from '../../libs/PolicyUtils';
-import Form from '../../components/Form';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
 import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 import ValuePicker from '../../components/ValuePicker';
+import FormProvider from '../../components/Form/FormProvider';
+import InputWrapper from '../../components/Form/InputWrapper';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -182,7 +183,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]}
@@ -200,7 +201,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <TextInput
+                                <InputWrapper
+                                    InputComponent={TextInput}
                                     inputID="welcomeMessage"
                                     label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                     accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -213,7 +215,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={[styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="policyID"
                                     label={translate('workspace.common.workspace')}
                                     placeholder={translate('newRoomPage.selectAWorkspace')}
@@ -223,7 +226,8 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             {isPolicyAdmin && (
                                 <View style={styles.mhn5}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="writeCapability"
                                         label={translate('writeCapabilityPage.label')}
                                         items={writeCapabilityOptions}
@@ -233,7 +237,8 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                             )}
                             <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="visibility"
                                     label={translate('newRoomPage.visibility')}
                                     items={visibilityOptions}
@@ -242,7 +247,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
+                        </FormProvider>
                     </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>