[IMPROVEMENT] Use autoFocus rather than timeout + focus (#1071)

* autofocus replaced timout+focus

* removed inputRef

* Unnecessary focus on NewServerView when passing server as props

* Removed unnecessary code

app/views/CreateChannelView.js

@@ -120,9 +120,6 @@ class CreateChannelView extends React.Component {
 	componentDidMount() {
 		const { navigation } = this.props;
 		navigation.setParams({ submit: this.submit });
-		this.timeout = setTimeout(() => {
-			this.channelNameRef.focus();
-		}, 600);
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -181,12 +178,6 @@ class CreateChannelView extends React.Component {
 		}
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	onChangeText = (channelName) => {
 		const { navigation } = this.props;
 		navigation.setParams({ showSubmit: channelName.trim().length > 0 });
@@ -322,7 +313,7 @@ class CreateChannelView extends React.Component {
 					<ScrollView {...scrollPersistTaps}>
 						<View style={sharedStyles.separatorVertical}>
 							<TextInput
-								ref={ref => this.channelNameRef = ref}
+								autoFocus
 								style={styles.input}
 								label={I18n.t('Channel_Name')}
 								value={channelName}

app/views/ForgotPasswordView.js

@@ -32,12 +32,6 @@ export default class ForgotPasswordView extends React.Component {
 		isFetching: false
 	}
 
-	componentDidMount() {
-		this.timeout = setTimeout(() => {
-			this.emailInput.focus();
-		}, 600);
-	}
-
 	shouldComponentUpdate(nextProps, nextState) {
 		const { email, invalidEmail, isFetching } = this.state;
 		if (nextState.email !== email) {
@@ -52,12 +46,6 @@ export default class ForgotPasswordView extends React.Component {
 		return false;
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	validate = (email) => {
 		if (!isValidEmail(email)) {
 			this.setState({ invalidEmail: true });
@@ -99,7 +87,7 @@ export default class ForgotPasswordView extends React.Component {
 					<SafeAreaView style={sharedStyles.container} testID='forgot-password-view' forceInset={{ vertical: 'never' }}>
 						<Text style={[sharedStyles.loginTitle, sharedStyles.textBold]}>{I18n.t('Forgot_password')}</Text>
 						<TextInput
-							inputRef={(e) => { this.emailInput = e; }}
+							autoFocus
 							placeholder={I18n.t('Email')}
 							keyboardType='email-address'
 							iconLeft='mail'

app/views/LoginView.js

@@ -73,12 +73,6 @@ class LoginView extends React.Component {
 		this.setTitle(Site_Name);
 	}
 
-	componentDidMount() {
-		this.timeout = setTimeout(() => {
-			this.usernameInput.focus();
-		}, 600);
-	}
-
 	componentWillReceiveProps(nextProps) {
 		const { Site_Name, error } = this.props;
 		if (nextProps.Site_Name && nextProps.Site_Name !== Site_Name) {
@@ -87,11 +81,6 @@ class LoginView extends React.Component {
 			if (nextProps.error && nextProps.error.error === 'totp-required') {
 				LayoutAnimation.easeInEaseOut();
 				this.setState({ showTOTP: true });
-				setTimeout(() => {
-					if (this.codeInput && this.codeInput.focus) {
-						this.codeInput.focus();
-					}
-				}, 300);
 				return;
 			}
 			Alert.alert(I18n.t('Oops'), I18n.t('Login_error'));
@@ -138,12 +127,6 @@ class LoginView extends React.Component {
 		return false;
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	setTitle = (title) => {
 		const { navigation } = this.props;
 		navigation.setParams({ title });
@@ -189,6 +172,7 @@ class LoginView extends React.Component {
 				<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular]}>{I18n.t('Whats_your_2fa')}</Text>
 				<TextInput
 					inputRef={ref => this.codeInput = ref}
+					autoFocus
 					onChangeText={value => this.setState({ code: value })}
 					keyboardType='numeric'
 					returnKeyType='send'
@@ -217,7 +201,7 @@ class LoginView extends React.Component {
 			<SafeAreaView style={sharedStyles.container} testID='login-view' forceInset={{ vertical: 'never' }}>
 				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold]}>{I18n.t('Login')}</Text>
 				<TextInput
-					inputRef={(e) => { this.usernameInput = e; }}
+					autoFocus
 					placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
 					keyboardType='email-address'
 					returnKeyType='next'

app/views/NewServerView.js

@@ -58,20 +58,20 @@ class NewServerView extends React.Component {
 		connectServer: PropTypes.func.isRequired
 	}
 
-	state = {
-		text: ''
+	constructor(props) {
+		super(props);
+		const server = props.navigation.getParam('server');
+		this.state = {
+			text: server || '',
+			autoFocus: !server
+		};
 	}
 
 	componentDidMount() {
-		const { navigation, connectServer } = this.props;
-		const server = navigation.getParam('server');
-		if (server) {
-			connectServer(server);
-			this.setState({ text: server });
-		} else {
-			this.timeout = setTimeout(() => {
-				this.input.focus();
-			}, 600);
+		const { text } = this.state;
+		const { connectServer } = this.props;
+		if (text) {
+			connectServer(text);
 		}
 	}
 
@@ -87,12 +87,6 @@ class NewServerView extends React.Component {
 		return false;
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	onChangeText = (text) => {
 		this.setState({ text });
 	}
@@ -150,7 +144,7 @@ class NewServerView extends React.Component {
 
 	render() {
 		const { connecting } = this.props;
-		const { text } = this.state;
+		const { text, autoFocus } = this.state;
 		return (
 			<KeyboardView
 				contentContainerStyle={sharedStyles.container}
@@ -163,7 +157,7 @@ class NewServerView extends React.Component {
 						<Image style={styles.image} source={{ uri: 'new_server' }} />
 						<Text style={styles.title}>{I18n.t('Sign_in_your_server')}</Text>
 						<TextInput
-							inputRef={e => this.input = e}
+							autoFocus={autoFocus}
 							containerStyle={styles.inputContainer}
 							placeholder={defaultServer}
 							value={text}
@@ -177,7 +171,7 @@ class NewServerView extends React.Component {
 							title={I18n.t('Connect')}
 							type='primary'
 							onPress={this.submit}
-							disabled={text.length === 0}
+							disabled={!text}
 							loading={connecting}
 							testID='new-server-view-button'
 						/>

app/views/RegisterView.js

@@ -65,12 +65,6 @@ class RegisterView extends React.Component {
 		};
 	}
 
-	componentDidMount() {
-		this.timeout = setTimeout(() => {
-			this.nameInput.focus();
-		}, 600);
-	}
-
 	shouldComponentUpdate(nextProps, nextState) {
 		const { customFields } = this.state;
 		if (!equal(nextState.customFields, customFields)) {
@@ -87,12 +81,6 @@ class RegisterView extends React.Component {
 		}
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	setTitle = (title) => {
 		const { navigation } = this.props;
 		navigation.setParams({ title });
@@ -201,7 +189,7 @@ class RegisterView extends React.Component {
 					<SafeAreaView style={sharedStyles.container} testID='register-view' forceInset={{ vertical: 'never' }}>
 						<Text style={[sharedStyles.loginTitle, sharedStyles.textBold]}>{I18n.t('Sign_Up')}</Text>
 						<TextInput
-							inputRef={(e) => { this.nameInput = e; }}
+							autoFocus
 							placeholder={I18n.t('Name')}
 							returnKeyType='next'
 							iconLeft='user'

app/views/RoomsListView/Header/Header.android.js

@@ -43,13 +43,13 @@ const styles = StyleSheet.create({
 });
 
 const Header = React.memo(({
-	connecting, isFetching, serverName, showServerDropdown, setSearchInputRef, showSearchHeader, onSearchChangeText, onPress
+	connecting, isFetching, serverName, showServerDropdown, showSearchHeader, onSearchChangeText, onPress
 }) => {
 	if (showSearchHeader) {
 		return (
 			<View style={styles.container}>
 				<TextInput
-					ref={setSearchInputRef}
+					autoFocus
 					style={styles.server}
 					placeholder='Search'
 					placeholderTextColor='rgba(255, 255, 255, 0.5)'
@@ -81,7 +81,6 @@ Header.propTypes = {
 	showSearchHeader: PropTypes.bool.isRequired,
 	onPress: PropTypes.func.isRequired,
 	onSearchChangeText: PropTypes.func.isRequired,
-	setSearchInputRef: PropTypes.func.isRequired,
 	connecting: PropTypes.bool,
 	isFetching: PropTypes.bool,
 	serverName: PropTypes.string

app/views/RoomsListView/Header/index.js

@@ -21,15 +21,6 @@ class RoomsListHeaderView extends PureComponent {
 		setSearch: PropTypes.func
 	}
 
-	componentDidUpdate(prevProps) {
-		const { showSearchHeader } = this.props;
-		if (showSearchHeader && prevProps.showSearchHeader !== showSearchHeader) {
-			setTimeout(() => {
-				this.searchInputRef.focus();
-			}, 300);
-		}
-	}
-
 	onSearchChangeText = (text) => {
 		const { setSearch } = this.props;
 		setSearch(text.trim());
@@ -51,10 +42,6 @@ class RoomsListHeaderView extends PureComponent {
 		}
 	}
 
-	setSearchInputRef = (ref) => {
-		this.searchInputRef = ref;
-	}
-
 	render() {
 		const {
 			serverName, showServerDropdown, showSearchHeader, connecting, isFetching
@@ -67,7 +54,6 @@ class RoomsListHeaderView extends PureComponent {
 				showSearchHeader={showSearchHeader}
 				connecting={connecting}
 				isFetching={isFetching}
-				setSearchInputRef={this.setSearchInputRef}
 				onPress={this.onPress}
 				onSearchChangeText={text => this.onSearchChangeText(text)}
 			/>

app/views/SearchMessagesView/index.js

@@ -38,10 +38,6 @@ class SearchMessagesView extends React.Component {
 		this.rid = props.navigation.getParam('rid');
 	}
 
-	componentDidMount() {
-		this.name.focus();
-	}
-
 	shouldComponentUpdate(nextProps, nextState) {
 		const { loading, searchText, messages } = this.state;
 		if (nextState.loading !== loading) {
@@ -128,7 +124,7 @@ class SearchMessagesView extends React.Component {
 				<StatusBar />
 				<View style={styles.searchContainer}>
 					<RCTextInput
-						inputRef={(e) => { this.name = e; }}
+						autoFocus
 						label={I18n.t('Search')}
 						onChangeText={this.search}
 						placeholder={I18n.t('Search_Messages')}

app/views/SetUsernameView.js

@@ -53,9 +53,6 @@ class SetUsernameView extends React.Component {
 	}
 
 	async componentDidMount() {
-		this.timeout = setTimeout(() => {
-			this.usernameInput.focus();
-		}, 600);
 		const suggestion = await RocketChat.getUsernameSuggestion();
 		if (suggestion.success) {
 			this.setState({ username: suggestion.result });
@@ -73,12 +70,6 @@ class SetUsernameView extends React.Component {
 		return false;
 	}
 
-	componentWillUnmount() {
-		if (this.timeout) {
-			clearTimeout(this.timeout);
-		}
-	}
-
 	submit = async() => {
 		const { username } = this.state;
 		const { loginRequest, token } = this.props;
@@ -107,7 +98,7 @@ class SetUsernameView extends React.Component {
 						<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle]}>{I18n.t('Username')}</Text>
 						<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular]}>{I18n.t('Set_username_subtitle')}</Text>
 						<TextInput
-							inputRef={e => this.usernameInput = e}
+							autoFocus
 							placeholder={I18n.t('Username')}
 							returnKeyType='send'
 							iconLeft='at'