From 5165662941f0cbf69627007759bd6cb325b3c4c7 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 01:24:05 +0100
Subject: [PATCH 01/22] [Fix] Allow Form component to detect children that are
 Class components

---
 src/components/Form.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index a6320fe04b74..25db26e182f5 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -174,15 +174,19 @@ class Form extends React.Component {
 
             // Look for any inputs nested in a custom component, e.g AddressForm or IdentityForm
             if (_.isFunction(child.type)) {
-                const nestedChildren = new child.type(child.props);
+                const childNode = new child.type(child.props);
 
-                if (!React.isValidElement(nestedChildren) || !lodashGet(nestedChildren, 'props.children')) {
-                    return child;
+                // If the custom component has a render method, use it to get the nested children
+                const nestedChildren = _.isFunction(childNode.render) ? childNode.render() : childNode;
+
+                // Render the custom component if it's a valid React element
+                // If the custom component has nested children, Loop over them and supply From props
+                if (React.isValidElement(nestedChildren) || lodashGet(nestedChildren, 'props.children')) {
+                    return this.childrenWrapperWithProps(nestedChildren);
                 }
 
-                return React.cloneElement(nestedChildren, {
-                    children: this.childrenWrapperWithProps(lodashGet(nestedChildren, 'props.children')),
-                });
+                // Just render the child if it's custom component not a valid React element, or if it hasn't children
+                return child;
             }
 
             // We check if the child has the inputID prop.

From 2c6a4b4eb7bf5651d46df17989ba7e6c85b05431 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 01:34:09 +0100
Subject: [PATCH 02/22] [Refactor] Add Form component to new room page

---
 src/ONYXKEYS.js                             |  1 +
 src/pages/workspace/WorkspaceNewRoomPage.js | 25 +++++++++------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 60a686195dcd..5f338cf5c6cf 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -172,6 +172,7 @@ export default {
         CLOSE_ACCOUNT_FORM: 'closeAccount',
         PROFILE_SETTINGS_FORM: 'profileSettingsForm',
         DISPLAY_NAME_FORM: 'displayNameForm',
+        NEW_ROOM_FORM: 'newRoomForm',
     },
 
     // Whether we should show the compose input or not
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 654e2ce8cc0f..48d12697fae5 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -15,11 +15,10 @@ import Picker from '../../components/Picker';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import Text from '../../components/Text';
-import Button from '../../components/Button';
-import FixedFooter from '../../components/FixedFooter';
 import Permissions from '../../libs/Permissions';
 import Log from '../../libs/Log';
 import * as ValidationUtils from '../../libs/ValidationUtils';
+import Form from '../../components/Form';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -155,7 +154,14 @@ class WorkspaceNewRoomPage extends React.Component {
                     title={this.props.translate('newRoomPage.newRoom')}
                     onCloseButtonPress={() => Navigation.dismissModal()}
                 />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                <Form
+                    formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                    submitButtonText={this.props.translate('newRoomPage.createRoom')}
+                    style={[styles.mh5, styles.mt5, styles.flexGrow1]}
+                    validate={this.validate}
+                    onSubmit={this.validateAndAddPolicyReport}
+                    enabledWhenOffline
+                >
                     <View style={styles.mb5}>
                         <RoomNameInput
                             ref={el => this.roomNameInputRef = el}
@@ -186,16 +192,7 @@ class WorkspaceNewRoomPage extends React.Component {
                     <Text style={[styles.textLabel, styles.colorMuted]}>
                         {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
                     </Text>
-                </ScrollView>
-                <FixedFooter>
-                    <Button
-                        success
-                        pressOnEnter
-                        onPress={this.validateAndAddPolicyReport}
-                        style={[styles.w100]}
-                        text={this.props.translate('newRoomPage.createRoom')}
-                    />
-                </FixedFooter>
+                </Form>
             </ScreenWrapper>
         );
     }

From 2495c4f471cb3e995d69b77cae3ec8f005c6aa55 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 01:44:19 +0100
Subject: [PATCH 03/22] [Refactor] Update validate function to work with Form
 component

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 48d12697fae5..44176c9f6865 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -54,6 +54,7 @@ class WorkspaceNewRoomPage extends React.Component {
             workspaceOptions: [],
         };
 
+        this.validate = this.validate.bind(this);
         this.validateAndAddPolicyReport = this.validateAndAddPolicyReport.bind(this);
         this.focusRoomNameInput = this.focusRoomNameInput.bind(this);
     }
@@ -85,32 +86,32 @@ class WorkspaceNewRoomPage extends React.Component {
     }
 
     /**
+     * @param {Object} values - form input values passed by the Form component
      * @returns {Boolean}
      */
-    validate() {
+    validate(values) {
         const errors = {};
 
         // We error if the user doesn't enter a room name or left blank
-        if (!this.state.roomName || this.state.roomName === CONST.POLICY.ROOM_PREFIX) {
+        if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) {
             errors.roomName = this.props.translate('newRoomPage.pleaseEnterRoomName');
         }
 
         // We error if the room name already exists.
-        if (ValidationUtils.isExistingRoomName(this.state.roomName, this.props.reports, this.state.policyID)) {
+        if (ValidationUtils.isExistingRoomName(values.roomName, this.props.reports, values.policyID)) {
             errors.roomName = this.props.translate('newRoomPage.roomAlreadyExistsError');
         }
 
         // Certain names are reserved for default rooms and should not be used for policy rooms.
-        if (ValidationUtils.isReservedRoomName(this.state.roomName)) {
+        if (ValidationUtils.isReservedRoomName(values.roomName)) {
             errors.roomName = this.props.translate('newRoomPage.roomNameReservedError');
         }
 
-        if (!this.state.policyID) {
+        if (!values.policyID) {
             errors.policyID = this.props.translate('newRoomPage.pleaseSelectWorkspace');
         }
 
-        this.setState({errors});
-        return _.isEmpty(errors);
+        return errors;
     }
 
     /**
@@ -164,6 +165,7 @@ class WorkspaceNewRoomPage extends React.Component {
                 >
                     <View style={styles.mb5}>
                         <RoomNameInput
+                            inputID="roomName"
                             ref={el => this.roomNameInputRef = el}
                             policyID={this.state.policyID}
                             errorText={this.state.errors.roomName}
@@ -173,6 +175,7 @@ class WorkspaceNewRoomPage extends React.Component {
                     </View>
                     <View style={styles.mb5}>
                         <Picker
+                            inputID="policyID"
                             value={this.state.policyID}
                             label={this.props.translate('workspace.common.workspace')}
                             placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
@@ -183,6 +186,7 @@ class WorkspaceNewRoomPage extends React.Component {
                     </View>
                     <View style={styles.mb2}>
                         <Picker
+                            inputID="visibility"
                             value={this.state.visibility}
                             label={this.props.translate('newRoomPage.visibility')}
                             items={visibilityOptions}

From 4a14a871c276086c1d9aba61275cddbf7a5114b3 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 02:18:17 +0100
Subject: [PATCH 04/22] [Refactor] workspace selector not to use state

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 54 ++++++++++++---------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 44176c9f6865..618386a7b5b3 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -20,6 +20,17 @@ import Log from '../../libs/Log';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import Form from '../../components/Form';
 
+/**
+ * Workspaces are policies with type === 'free'
+ * @param {Object} [policy]
+ * @returns {Object|undefined}
+ */
+const workspaceOptionsSelector = policy => policy && policy.type === CONST.POLICY.TYPE.FREE && ({
+    label: policy.name,
+    key: policy.id,
+    value: policy.id,
+});
+
 const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.shape({
@@ -33,6 +44,18 @@ const propTypes = {
         policyID: PropTypes.string,
     }).isRequired,
 
+    /** All Workspaces */
+    workspaceOptions: PropTypes.shape({
+        /** The workspace label */
+        label: PropTypes.string,
+
+        /** The workspace id */
+        key: PropTypes.string,
+
+        /** ID of the workspace */
+        value: PropTypes.string,
+    }),
+
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -40,6 +63,7 @@ const propTypes = {
 };
 const defaultProps = {
     betas: [],
+    workspaceOptions: [],
 };
 
 class WorkspaceNewRoomPage extends React.Component {
@@ -51,7 +75,6 @@ class WorkspaceNewRoomPage extends React.Component {
             policyID: '',
             visibility: CONST.REPORT.VISIBILITY.RESTRICTED,
             errors: {},
-            workspaceOptions: [],
         };
 
         this.validate = this.validate.bind(this);
@@ -59,24 +82,6 @@ class WorkspaceNewRoomPage extends React.Component {
         this.focusRoomNameInput = this.focusRoomNameInput.bind(this);
     }
 
-    componentDidMount() {
-        // Workspaces are policies with type === 'free'
-        const workspaces = _.filter(this.props.policies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE);
-        this.setState({workspaceOptions: _.map(workspaces, policy => ({label: policy.name, key: policy.id, value: policy.id}))});
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.policies.length === prevProps.policies.length) {
-            return;
-        }
-
-        // Workspaces are policies with type === 'free'
-        const workspaces = _.filter(this.props.policies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE);
-
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({workspaceOptions: _.map(workspaces, policy => ({label: policy.name, key: policy.id, value: policy.id}))});
-    }
-
     validateAndAddPolicyReport() {
         if (!this.validate()) {
             return;
@@ -143,6 +148,8 @@ class WorkspaceNewRoomPage extends React.Component {
             return null;
         }
 
+        const workspaceOptions = _.filter(this.props.workspaceOptions, policy => !!policy);
+
         const visibilityOptions = _.map(_.values(CONST.REPORT.VISIBILITY), visibilityOption => ({
             label: this.props.translate(`newRoomPage.visibilityOptions.${visibilityOption}`),
             value: visibilityOption,
@@ -176,12 +183,9 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb5}>
                         <Picker
                             inputID="policyID"
-                            value={this.state.policyID}
                             label={this.props.translate('workspace.common.workspace')}
                             placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
-                            items={this.state.workspaceOptions}
-                            errorText={this.state.errors.policyID}
-                            onInputChange={policyID => this.clearErrorAndSetValue('policyID', policyID)}
+                            items={workspaceOptions}
                         />
                     </View>
                     <View style={styles.mb2}>
@@ -213,6 +217,10 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        workspaceOptions: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+            selector: workspaceOptionsSelector,
+        },
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },

From 3ca3eb2c513b80ce538dc12cc7031ed182ff721b Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 02:35:36 +0100
Subject: [PATCH 05/22] [Refactor] visibility selector not to use state

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 618386a7b5b3..a9aabbd207d8 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -73,7 +73,7 @@ class WorkspaceNewRoomPage extends React.Component {
         this.state = {
             roomName: '',
             policyID: '',
-            visibility: CONST.REPORT.VISIBILITY.RESTRICTED,
+            visibilityDescription: this.props.translate('newRoomPage.restrictedDescription'),
             errors: {},
         };
 
@@ -90,6 +90,17 @@ class WorkspaceNewRoomPage extends React.Component {
         Report.addPolicyReport(policy, this.state.roomName, this.state.visibility);
     }
 
+    /**
+     * @param {String} visibility - form input value passed by the Form component
+     */
+    updateVisibilityDescription(visibility) {
+        const visibilityDescription = this.props.translate(`newRoomPage.${visibility}Description`);
+        if (visibilityDescription === this.state.visibilityDescription) {
+            return;
+        }
+        this.setState({visibilityDescription});
+    }
+
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Boolean}
@@ -97,6 +108,9 @@ class WorkspaceNewRoomPage extends React.Component {
     validate(values) {
         const errors = {};
 
+        // update visibility
+        this.updateVisibilityDescription(values.visibility);
+
         // We error if the user doesn't enter a room name or left blank
         if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) {
             errors.roomName = this.props.translate('newRoomPage.pleaseEnterRoomName');
@@ -191,14 +205,13 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb2}>
                         <Picker
                             inputID="visibility"
-                            value={this.state.visibility}
                             label={this.props.translate('newRoomPage.visibility')}
                             items={visibilityOptions}
-                            onInputChange={visibility => this.setState({visibility})}
+                            defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
                         />
                     </View>
                     <Text style={[styles.textLabel, styles.colorMuted]}>
-                        {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
+                        {this.state.visibilityDescription}
                     </Text>
                 </Form>
             </ScreenWrapper>

From 8b788633df9163253e4346cd9e33177a5b2aa38b Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 02:39:53 +0100
Subject: [PATCH 06/22] [Refactor] Remove focus input functionality that no
 longer works

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index a9aabbd207d8..f6ded6c05510 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -79,7 +79,6 @@ class WorkspaceNewRoomPage extends React.Component {
 
         this.validate = this.validate.bind(this);
         this.validateAndAddPolicyReport = this.validateAndAddPolicyReport.bind(this);
-        this.focusRoomNameInput = this.focusRoomNameInput.bind(this);
     }
 
     validateAndAddPolicyReport() {
@@ -171,7 +170,7 @@ class WorkspaceNewRoomPage extends React.Component {
         }));
 
         return (
-            <ScreenWrapper onTransitionEnd={this.focusRoomNameInput}>
+            <ScreenWrapper>
                 <HeaderWithCloseButton
                     title={this.props.translate('newRoomPage.newRoom')}
                     onCloseButtonPress={() => Navigation.dismissModal()}
@@ -187,7 +186,6 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb5}>
                         <RoomNameInput
                             inputID="roomName"
-                            ref={el => this.roomNameInputRef = el}
                             policyID={this.state.policyID}
                             errorText={this.state.errors.roomName}
                             onChangeText={roomName => this.clearErrorAndSetValue('roomName', roomName)}

From 469b1cc8d0eef76ea2746b69415622bdc8fa36a1 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 02:49:25 +0100
Subject: [PATCH 07/22] [Refactor] Remove focus input functionality that no
 longer works

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index f6ded6c05510..78dbf4d56f62 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -146,14 +146,6 @@ class WorkspaceNewRoomPage extends React.Component {
         }));
     }
 
-    focusRoomNameInput() {
-        if (!this.roomNameInputRef) {
-            return;
-        }
-
-        this.roomNameInputRef.focus();
-    }
-
     render() {
         if (!Permissions.canUsePolicyRooms(this.props.betas)) {
             Log.info('Not showing create Policy Room page since user is not on policy rooms beta');

From 904073ce61c810256dfcb98fbe47e2a2823dc76d Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 18:48:21 +0100
Subject: [PATCH 08/22] [Refactor] RoomName Input not to use state

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 78dbf4d56f62..fa2182675b58 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -178,10 +178,9 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb5}>
                         <RoomNameInput
                             inputID="roomName"
+                            defaultValue=""
+                            autoFocus
                             policyID={this.state.policyID}
-                            errorText={this.state.errors.roomName}
-                            onChangeText={roomName => this.clearErrorAndSetValue('roomName', roomName)}
-                            value={this.state.roomName}
                         />
                     </View>
                     <View style={styles.mb5}>

From 9a8f58a7527e948248e3dadba798d9a5e161976c Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 19:46:47 +0100
Subject: [PATCH 09/22] [Refactor] RoomNameInput to use Form input props and
 add autoFocus prop

---
 src/components/RoomNameInput/index.js           |  8 ++++++++
 src/components/RoomNameInput/index.native.js    |  8 ++++++++
 .../RoomNameInput/roomNameInputPropTypes.js     | 17 +++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 6c015ec361de..2c27fca0e24b 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import _ from 'underscore';
 import CONST from '../../CONST';
 import withLocalize from '../withLocalize';
 import TextInput from '../TextInput';
@@ -26,6 +27,11 @@ class RoomNameInput extends Component {
         const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
         this.props.onChangeText(modifiedRoomName);
 
+        // if custom component has onInputChange, use it to trigger changes (Form input)
+        if (_.isFunction(this.props.onInputChange)) {
+            this.props.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
@@ -65,6 +71,8 @@ class RoomNameInput extends Component {
                 onSelectionChange={event => this.setSelection(event.nativeEvent.selection)}
                 errorText={this.props.errorText}
                 autoCapitalize="none"
+                onBlur={this.props.onBlur}
+                autoFocus={this.props.autoFocus}
             />
         );
     }
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index d47371a5b92e..273bae8a8107 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import _ from 'underscore';
 import CONST from '../../CONST';
 import withLocalize from '../withLocalize';
 import TextInput from '../TextInput';
@@ -21,6 +22,11 @@ class RoomNameInput extends Component {
         const roomName = event.nativeEvent.text;
         const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
         this.props.onChangeText(modifiedRoomName);
+
+        // if custom component has onInputChange, use it to trigger changes (Form input)
+        if (_.isFunction(this.props.onInputChange)) {
+            this.props.onInputChange(modifiedRoomName);
+        }
     }
 
     render() {
@@ -37,6 +43,8 @@ class RoomNameInput extends Component {
                 errorText={this.props.errorText}
                 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={this.props.onBlur}
+                autoFocus={this.props.autoFocus}
             />
         );
     }
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index db5ce4b3c0c6..6ff7a05ae7cb 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -18,6 +18,18 @@ const propTypes = {
 
     /** A ref forwarded to the TextInput */
     forwardedRef: PropTypes.func,
+
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
+
+    /** Callback that is called when the text input is blurred */
+    onBlur: PropTypes.func,
+
+    /** The value to set the field to initially */
+    defaultValue: PropTypes.string,
+
+    /** AutoFocus */
+    autoFocus: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -26,6 +38,11 @@ const defaultProps = {
     disabled: false,
     errorText: '',
     forwardedRef: () => {},
+
+    inputID: undefined,
+    onBlur: () => {},
+    defaultValue: undefined,
+    autoFocus: false,
 };
 
 export {propTypes, defaultProps};

From 5c39c8bebdc48415ec6045a0ce7039f4255f7991 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 19:55:45 +0100
Subject: [PATCH 10/22] [Refactor] Update submit function for Form component

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index fa2182675b58..dc0c15752e03 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -71,22 +71,18 @@ class WorkspaceNewRoomPage extends React.Component {
         super(props);
 
         this.state = {
-            roomName: '',
             policyID: '',
             visibilityDescription: this.props.translate('newRoomPage.restrictedDescription'),
             errors: {},
         };
 
         this.validate = this.validate.bind(this);
-        this.validateAndAddPolicyReport = this.validateAndAddPolicyReport.bind(this);
+        this.submit = this.submit.bind(this);
     }
 
-    validateAndAddPolicyReport() {
-        if (!this.validate()) {
-            return;
-        }
-        const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.state.policyID}`];
-        Report.addPolicyReport(policy, this.state.roomName, this.state.visibility);
+    submit(values) {
+        const policyID = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${values.policyID}`];
+        Report.addPolicyReport(policyID, values.roomName, values.visibility);
     }
 
     /**
@@ -172,7 +168,7 @@ class WorkspaceNewRoomPage extends React.Component {
                     submitButtonText={this.props.translate('newRoomPage.createRoom')}
                     style={[styles.mh5, styles.mt5, styles.flexGrow1]}
                     validate={this.validate}
-                    onSubmit={this.validateAndAddPolicyReport}
+                    onSubmit={this.submit}
                     enabledWhenOffline
                 >
                     <View style={styles.mb5}>

From c5a71a8289070491982c3135dae34c804081bf1f Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 19:56:43 +0100
Subject: [PATCH 11/22] [Refactor] Remove unused clearErrorAndSetValue

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index dc0c15752e03..2bffa1846fea 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -73,7 +73,6 @@ class WorkspaceNewRoomPage extends React.Component {
         this.state = {
             policyID: '',
             visibilityDescription: this.props.translate('newRoomPage.restrictedDescription'),
-            errors: {},
         };
 
         this.validate = this.validate.bind(this);
@@ -128,20 +127,6 @@ class WorkspaceNewRoomPage extends React.Component {
         return errors;
     }
 
-    /**
-     * @param {String} inputKey
-     * @param {String} value
-     */
-    clearErrorAndSetValue(inputKey, value) {
-        this.setState(prevState => ({
-            [inputKey]: value,
-            errors: {
-                ...prevState.errors,
-                [inputKey]: '',
-            },
-        }));
-    }
-
     render() {
         if (!Permissions.canUsePolicyRooms(this.props.betas)) {
             Log.info('Not showing create Policy Room page since user is not on policy rooms beta');

From 330a2dddaf2e2359f463dcb249c4b61191238824 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 19:58:18 +0100
Subject: [PATCH 12/22] [Refactor] Add submit annotation

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 2bffa1846fea..69cd8033c9b4 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -79,6 +79,9 @@ class WorkspaceNewRoomPage extends React.Component {
         this.submit = this.submit.bind(this);
     }
 
+    /**
+     * @param {Object} values - form input values passed by the Form component
+     */
     submit(values) {
         const policyID = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${values.policyID}`];
         Report.addPolicyReport(policyID, values.roomName, values.visibility);

From b25221a77c6eaf84c0c4f9691d700a3ed7d0935b Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 21:59:15 +0100
Subject: [PATCH 13/22] [Refactor] RoomNameInput Remove Extra forwardRef

---
 src/components/RoomNameInput/index.js        | 7 +------
 src/components/RoomNameInput/index.native.js | 7 +------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 2c27fca0e24b..79761438aabe 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -81,9 +81,4 @@ class RoomNameInput extends Component {
 RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 
-export default withLocalize(
-    React.forwardRef((props, ref) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-        <RoomNameInput {...props} forwardedRef={ref} />
-    )),
-);
+export default withLocalize(RoomNameInput);
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index 273bae8a8107..ef011988e6ab 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -53,9 +53,4 @@ class RoomNameInput extends Component {
 RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 
-export default withLocalize(
-    React.forwardRef((props, ref) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-        <RoomNameInput {...props} forwardedRef={ref} />
-    )),
-);
+export default withLocalize(RoomNameInput);

From f9022f77bde7d30294e34f7c93d6847f98b9fe5d Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Mon, 19 Dec 2022 23:48:05 +0100
Subject: [PATCH 14/22] UNDO [Refactor] RoomNameInput Remove Extra forwardRef

---
 src/components/RoomNameInput/index.js        | 7 ++++++-
 src/components/RoomNameInput/index.native.js | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 79761438aabe..2c27fca0e24b 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -81,4 +81,9 @@ class RoomNameInput extends Component {
 RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 
-export default withLocalize(RoomNameInput);
+export default withLocalize(
+    React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        <RoomNameInput {...props} forwardedRef={ref} />
+    )),
+);
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index ef011988e6ab..273bae8a8107 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -53,4 +53,9 @@ class RoomNameInput extends Component {
 RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
 RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
 
-export default withLocalize(RoomNameInput);
+export default withLocalize(
+    React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        <RoomNameInput {...props} forwardedRef={ref} />
+    )),
+);

From 79335889f1e4c2864b4cc4c3060d778b8863502b Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 12:12:46 +0100
Subject: [PATCH 15/22] Add defaultValue to RoomNameInput

---
 src/components/RoomNameInput/index.js        | 1 +
 src/components/RoomNameInput/index.native.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 2c27fca0e24b..c85fd0a8adf0 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -73,6 +73,7 @@ class RoomNameInput extends Component {
                 autoCapitalize="none"
                 onBlur={this.props.onBlur}
                 autoFocus={this.props.autoFocus}
+                defaultValue={this.props.defaultValue}
             />
         );
     }
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index 273bae8a8107..19fac90d8189 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -45,6 +45,7 @@ class RoomNameInput extends Component {
                 keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
                 onBlur={this.props.onBlur}
                 autoFocus={this.props.autoFocus}
+                defaultValue={this.props.defaultValue}
             />
         );
     }

From 320dcf4028a60ddb703e2b3c6a1d5e645cae8380 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 12:18:25 +0100
Subject: [PATCH 16/22] Add defaultValue to RoomNameInput

---
 src/components/RoomNameInput/roomNameInputPropTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 6ff7a05ae7cb..e5aea1b39f25 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -41,7 +41,7 @@ const defaultProps = {
 
     inputID: undefined,
     onBlur: () => {},
-    defaultValue: undefined,
+    defaultValue: '',
     autoFocus: false,
 };
 

From 99b7f80815d1035ac63974c6aeb19a6f32322a95 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 12:45:01 +0100
Subject: [PATCH 17/22] Set defaultValue of RoomNameInput to ROOM_PREFIX

---
 src/components/RoomNameInput/roomNameInputPropTypes.js | 3 ++-
 src/pages/workspace/WorkspaceNewRoomPage.js            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index e5aea1b39f25..f9c3a3afa1fb 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import {withLocalizePropTypes} from '../withLocalize';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -41,7 +42,7 @@ const defaultProps = {
 
     inputID: undefined,
     onBlur: () => {},
-    defaultValue: '',
+    defaultValue: CONST.POLICY.ROOM_PREFIX,
     autoFocus: false,
 };
 
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 69cd8033c9b4..50ecdc09c4a8 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -162,7 +162,7 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb5}>
                         <RoomNameInput
                             inputID="roomName"
-                            defaultValue=""
+                            defaultValue={CONST.POLICY.ROOM_PREFIX}
                             autoFocus
                             policyID={this.state.policyID}
                         />

From e7270bc7e41be7d2371bc0695156a8e7ac115f5b Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 16:22:53 +0100
Subject: [PATCH 18/22] Get workspaceOptions from this.props.policies

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 34 +++------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 50ecdc09c4a8..98cec1dfcec1 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -20,17 +20,6 @@ import Log from '../../libs/Log';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import Form from '../../components/Form';
 
-/**
- * Workspaces are policies with type === 'free'
- * @param {Object} [policy]
- * @returns {Object|undefined}
- */
-const workspaceOptionsSelector = policy => policy && policy.type === CONST.POLICY.TYPE.FREE && ({
-    label: policy.name,
-    key: policy.id,
-    value: policy.id,
-});
-
 const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.shape({
@@ -44,18 +33,6 @@ const propTypes = {
         policyID: PropTypes.string,
     }).isRequired,
 
-    /** All Workspaces */
-    workspaceOptions: PropTypes.shape({
-        /** The workspace label */
-        label: PropTypes.string,
-
-        /** The workspace id */
-        key: PropTypes.string,
-
-        /** ID of the workspace */
-        value: PropTypes.string,
-    }),
-
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -63,7 +40,6 @@ const propTypes = {
 };
 const defaultProps = {
     betas: [],
-    workspaceOptions: [],
 };
 
 class WorkspaceNewRoomPage extends React.Component {
@@ -137,7 +113,11 @@ class WorkspaceNewRoomPage extends React.Component {
             return null;
         }
 
-        const workspaceOptions = _.filter(this.props.workspaceOptions, policy => !!policy);
+        // Workspaces are policies with type === 'free'
+        const workspaceOptions = _.map(
+            _.filter(this.props.policies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE),
+            policy => ({label: policy.name, key: policy.id, value: policy.id}),
+        );
 
         const visibilityOptions = _.map(_.values(CONST.REPORT.VISIBILITY), visibilityOption => ({
             label: this.props.translate(`newRoomPage.visibilityOptions.${visibilityOption}`),
@@ -203,10 +183,6 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
-        workspaceOptions: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-            selector: workspaceOptionsSelector,
-        },
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },

From 52552535b6f09c98997fdfe6242c3fe9fb0ea9a9 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 16:41:08 +0100
Subject: [PATCH 19/22] Remove unused this.state.policyID

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 98cec1dfcec1..8f7d1a697d8b 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -47,7 +47,6 @@ class WorkspaceNewRoomPage extends React.Component {
         super(props);
 
         this.state = {
-            policyID: '',
             visibilityDescription: this.props.translate('newRoomPage.restrictedDescription'),
         };
 
@@ -144,7 +143,6 @@ class WorkspaceNewRoomPage extends React.Component {
                             inputID="roomName"
                             defaultValue={CONST.POLICY.ROOM_PREFIX}
                             autoFocus
-                            policyID={this.state.policyID}
                         />
                     </View>
                     <View style={styles.mb5}>

From 3b20775acca94dde7b4cd7f22097de951c46f64e Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 19:13:33 +0100
Subject: [PATCH 20/22] update Visibility Description onValueChange instead of
 on validate

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 8f7d1a697d8b..43cd24395430 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -52,6 +52,7 @@ class WorkspaceNewRoomPage extends React.Component {
 
         this.validate = this.validate.bind(this);
         this.submit = this.submit.bind(this);
+        this.updateVisibilityDescription = this.updateVisibilityDescription.bind(this);
     }
 
     /**
@@ -80,9 +81,6 @@ class WorkspaceNewRoomPage extends React.Component {
     validate(values) {
         const errors = {};
 
-        // update visibility
-        this.updateVisibilityDescription(values.visibility);
-
         // We error if the user doesn't enter a room name or left blank
         if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) {
             errors.roomName = this.props.translate('newRoomPage.pleaseEnterRoomName');
@@ -158,6 +156,7 @@ class WorkspaceNewRoomPage extends React.Component {
                             inputID="visibility"
                             label={this.props.translate('newRoomPage.visibility')}
                             items={visibilityOptions}
+                            onValueChange={this.updateVisibilityDescription}
                             defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
                         />
                     </View>

From c45d9d716fbc4b4b4267cd2ebf7d5fe13188edc5 Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 19:31:26 +0100
Subject: [PATCH 21/22] Revert setting default value

---
 src/components/RoomNameInput/roomNameInputPropTypes.js | 3 +--
 src/pages/workspace/WorkspaceNewRoomPage.js            | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index f9c3a3afa1fb..6ff7a05ae7cb 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import {withLocalizePropTypes} from '../withLocalize';
-import CONST from '../../CONST';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -42,7 +41,7 @@ const defaultProps = {
 
     inputID: undefined,
     onBlur: () => {},
-    defaultValue: CONST.POLICY.ROOM_PREFIX,
+    defaultValue: undefined,
     autoFocus: false,
 };
 
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 43cd24395430..d4e394273db7 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -139,7 +139,6 @@ class WorkspaceNewRoomPage extends React.Component {
                     <View style={styles.mb5}>
                         <RoomNameInput
                             inputID="roomName"
-                            defaultValue={CONST.POLICY.ROOM_PREFIX}
                             autoFocus
                         />
                     </View>

From 2faa8b62c809384cfc778a5079e225ecccad684c Mon Sep 17 00:00:00 2001
From: Fedi Rajhi <fedirjh@gmail.com>
Date: Tue, 20 Dec 2022 20:27:56 +0100
Subject: [PATCH 22/22] Revert adding defaultValue prop

---
 src/components/RoomNameInput/index.js                  | 1 -
 src/components/RoomNameInput/index.native.js           | 1 -
 src/components/RoomNameInput/roomNameInputPropTypes.js | 4 ----
 3 files changed, 6 deletions(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index c85fd0a8adf0..2c27fca0e24b 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -73,7 +73,6 @@ class RoomNameInput extends Component {
                 autoCapitalize="none"
                 onBlur={this.props.onBlur}
                 autoFocus={this.props.autoFocus}
-                defaultValue={this.props.defaultValue}
             />
         );
     }
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index 19fac90d8189..273bae8a8107 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -45,7 +45,6 @@ class RoomNameInput extends Component {
                 keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
                 onBlur={this.props.onBlur}
                 autoFocus={this.props.autoFocus}
-                defaultValue={this.props.defaultValue}
             />
         );
     }
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 6ff7a05ae7cb..53666a6ae694 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -25,9 +25,6 @@ const propTypes = {
     /** Callback that is called when the text input is blurred */
     onBlur: PropTypes.func,
 
-    /** The value to set the field to initially */
-    defaultValue: PropTypes.string,
-
     /** AutoFocus */
     autoFocus: PropTypes.bool,
 };
@@ -41,7 +38,6 @@ const defaultProps = {
 
     inputID: undefined,
     onBlur: () => {},
-    defaultValue: undefined,
     autoFocus: false,
 };