Merge pull request #323 from paritytech/yj-focus-formfield

Fix #280: form field focus on input on component mount
openethereum · Jan 3, 2019 · a6aae1d · a6aae1d
2 parents e7b7ee4 + 0ef0d00
commit a6aae1d
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 48 deletions.
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
@@ -6,11 +6,21 @@
 import React, { Component } from 'react';
 import { AccountCard } from 'fether-ui';
 import { inject, observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
 
 @inject('createAccountStore')
 @observer
 class AccountCopyPhrase extends Component {
+  handleSubmit = () => {
+    const {
+      history,
+      location: { pathname }
+    } = this.props;
+
+    const currentStep = pathname.slice(-1);
+
+    history.push(`/accounts/new/${+currentStep + 1}`);
+  };
+
   render () {
     const {
       createAccountStore: { address, name, bip39Phrase },
@@ -24,7 +34,7 @@ class AccountCopyPhrase extends Component {
         address={address}
         name={name}
         drawers={[
-          <div key='createAccount'>
+          <form key='createAccount' onSubmit={this.handleSubmit}>
             <div className='text'>
               <p>Please write your secret phrase on a piece of paper:</p>
             </div>
@@ -46,15 +56,19 @@ class AccountCopyPhrase extends Component {
             </div>
             <nav className='form-nav -space-around'>
               {currentStep > 1 && (
-                <button className='button -cancel' onClick={history.goBack}>
+                <button
+                  className='button -cancel'
+                  onClick={history.goBack}
+                  type='button'
+                >
                   Back
                 </button>
               )}
-              <Link to={`/accounts/new/${+currentStep + 1}`}>
-                <button className='button'>Next</button>
-              </Link>
+              <button autoFocus className='button'>
+                Next
+              </button>
             </nav>
-          </div>
+          </form>
         ]}
       />
     );

diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -7,7 +7,6 @@ import React, { Component } from 'react';
 import { AccountCard, Card, Form as FetherForm } from 'fether-ui';
 import Blockies from 'react-blockies';
 import { inject, observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
 
 import loading from '../../../assets/img/icons/loading.svg';
 
@@ -25,27 +24,25 @@ class AccountName extends Component {
   handleChangeName = ({ target: { value } }) =>
     this.props.createAccountStore.setName(value);
 
-  render () {
-    const {
-      createAccountStore: { isImport }
-    } = this.props;
-
-    return isImport ? this.renderCardWhenImported() : this.renderCardWhenNew();
-  }
-
-  handleKeyPress = e => {
+  handleSubmit = () => {
     const {
       history,
       location: { pathname }
     } = this.props;
 
     const currentStep = pathname.slice(-1);
 
-    if (e.key === 'Enter') {
-      history.push(`/accounts/new/${+currentStep + 1}`);
-    }
+    history.push(`/accounts/new/${+currentStep + 1}`);
   };
 
+  render () {
+    const {
+      createAccountStore: { isImport }
+    } = this.props;
+
+    return isImport ? this.renderCardWhenImported() : this.renderCardWhenNew();
+  }
+
   renderCardWhenImported = () => {
     const {
       createAccountStore: { address, name }
@@ -98,35 +95,37 @@ class AccountName extends Component {
     const currentStep = pathname.slice(-1);
 
     return (
-      <div key='createAccount'>
+      <form key='createAccount' onSubmit={this.handleSubmit}>
         <div className='text'>
           <p>Please give this account a name:</p>
         </div>
         <FetherForm.Field
+          autoFocus
           label='Name'
           onChange={this.handleChangeName}
-          onKeyPress={this.handleKeyPress}
           required
           type='text'
           value={name}
         />
         <nav className='form-nav -space-around'>
           {currentStep > 1 && (
-            <button className='button -cancel' onClick={history.goBack}>
+            <button
+              className='button -cancel'
+              onClick={history.goBack}
+              type='button'
+            >
               Back
             </button>
           )}
           {name && address ? (
-            <Link to={`/accounts/new/${+currentStep + 1}`}>
-              <button className='button'>Next</button>
-            </Link>
+            <button className='button'>Next</button>
           ) : (
             <button className='button' disabled>
               Next
             </button>
           )}
         </nav>
-      </div>
+      </form>
     );
   };
 }

diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -27,9 +27,17 @@ class AccountPassword extends Component {
 
   handleSubmit = event => {
     const { createAccountStore, history } = this.props;
-    const { password } = this.state;
+    const { confirm, password } = this.state;
+
+    event && event.preventDefault();
+
+    if (!createAccountStore.jsonString && confirm !== password) {
+      this.setState({
+        error: 'Password confirmation does not match.'
+      });
+      return;
+    }
 
-    event.preventDefault();
     this.setState({ isLoading: true });
 
     // Save to parity
@@ -74,6 +82,7 @@ class AccountPassword extends Component {
             </div>
 
             <FetherForm.Field
+              autoFocus
               label='Password'
               onChange={this.handlePasswordChange}
               required
@@ -97,11 +106,16 @@ class AccountPassword extends Component {
 
             <nav className='form-nav -space-around'>
               {currentStep > 1 && (
-                <button className='button -cancel' onClick={history.goBack}>
+                <button
+                  className='button -cancel'
+                  onClick={history.goBack}
+                  type='button'
+                >
                   Back
                 </button>
               )}
               <button
+                autoFocus
                 className='button'
                 disabled={
                   !password ||

diff --git a/...ages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js b/...ages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
@@ -21,7 +21,7 @@ class AccountRewritePhrase extends Component {
     this.setState({ value });
   };
 
-  handleNextStep = async () => {
+  handleSubmit = async () => {
     const {
       history,
       location: { pathname },
@@ -48,7 +48,7 @@ class AccountRewritePhrase extends Component {
     const { value } = this.state;
     const currentStep = pathname.slice(-1);
     const body = [
-      <div key='createAccount'>
+      <form key='createAccount' onSubmit={this.handleSubmit}>
         <div className='text -centered'>
           {isImport ? (
             <AccountImportOptions />
@@ -61,6 +61,7 @@ class AccountRewritePhrase extends Component {
         </div>
 
         <FetherForm.Field
+          autoFocus
           as='textarea'
           label='Recovery phrase'
           onChange={this.handleChange}
@@ -70,13 +71,17 @@ class AccountRewritePhrase extends Component {
 
         <nav className='form-nav -space-around'>
           {currentStep > 1 && (
-            <button className='button -cancel' onClick={history.goBack}>
+            <button
+              className='button -cancel'
+              onClick={history.goBack}
+              type='button'
+            >
               Back
             </button>
           )}
           {this.renderButton()}
         </nav>
-      </div>
+      </form>
     ];
 
     return isImport ? (
@@ -100,23 +105,15 @@ class AccountRewritePhrase extends Component {
     // been correctly written by the user.
     if (!isImport) {
       return (
-        <button
-          className='button'
-          disabled={value !== bip39Phrase}
-          onClick={this.handleNextStep}
-        >
+        <button className='button' disabled={value !== bip39Phrase}>
           Next
         </button>
       );
     }
 
     // If we are importing an existing account, the button goes to the next step
     return (
-      <button
-        className='button'
-        disabled={!value.length || isLoading}
-        onClick={this.handleNextStep}
-      >
+      <button className='button' disabled={!value.length || isLoading}>
         Next
       </button>
     );

diff --git a/packages/fether-react/src/BackupAccount/BackupAccount.js b/packages/fether-react/src/BackupAccount/BackupAccount.js
@@ -34,7 +34,8 @@ class BackupAccount extends Component {
     const { accountAddress, history } = this.props;
     const { password } = this.state;
 
-    event.preventDefault();
+    event && event.preventDefault();
+
     this.setState({ isLoading: true });
 
     backupAccount(accountAddress, password)
@@ -90,6 +91,7 @@ class BackupAccount extends Component {
             <FetherForm.Field
               label='Password'
               onChange={this.handlePasswordChange}
+              autoFocus
               required
               type='password'
               value={password}
@@ -98,10 +100,18 @@ class BackupAccount extends Component {
             <p className='error'> {message} </p>
 
             <nav className='form-nav -space-around'>
-              <button className='button -cancel' onClick={history.goBack}>
+              <button
+                className='button -cancel'
+                onClick={history.goBack}
+                type='button'
+              >
                 Back
               </button>
-              <button className='button' disabled={!password || isLoading}>
+              <button
+                className='button'
+                disabled={!password || isLoading}
+                autoFocus
+              >
                 Confirm backup
               </button>
             </nav>

diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js
@@ -132,6 +132,7 @@ class Send extends Component {
                       <form className='send-form' onSubmit={handleSubmit}>
                         <fieldset className='form_fields'>
                           <Field
+                            autoFocus
                             className='form_field_amount'
                             formNoValidate
                             label='Amount'

diff --git a/packages/fether-react/src/Whitelist/Whitelist.js b/packages/fether-react/src/Whitelist/Whitelist.js
@@ -68,7 +68,8 @@ class Whitelist extends Component {
     // homepage) are stored in localStorage.
     let db;
     try {
-      db = (await import(`../assets/tokens/${this.props.chainName}.json`)).default;
+      db = (await import(`../assets/tokens/${this.props.chainName}.json`))
+        .default;
     } catch (e) {
       this.setState({ db: [], dbMap: {} });
       return;