fix(ui): autofocus network forms

When the network search and add contact forms open ensure that the most
relevant form field is selected by default.

Fix #389

app/components/AmountInput/AmountInput.js

@@ -46,6 +46,10 @@ class AmountInput extends React.Component {
     this.textInput.current.focus()
   }
 
+  clearTextInput() {
+    this.textInput.current.value = ''
+  }
+
   parseNumber(_value) {
     let value = _value || ''
     if (typeof _value === 'string') {

app/components/Contacts/AddChannel.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 
@@ -6,7 +6,19 @@ import x from 'icons/x.svg'
 
 import styles from './AddChannel.scss'
 
-const AddChannel = ({
+class AddChannel extends Component {
+  constructor(props) {
+    super(props)
+    this.searchInput = React.createRef()
+  }
+
+  componentDidMount() {
+    // Focus the search input field.
+    this.searchInput.current.focus()
+  }
+
+  render() {
+    const {
       contactsform,
       closeContactsForm,
       openSubmitChannelForm,
@@ -20,7 +32,7 @@ const AddChannel = ({
       loadingChannelPubkeys,
       showManualForm,
       openManualForm
-}) => {
+    } = this.props
     const renderRightSide = node => {
       if (loadingChannelPubkeys.includes(node.pub_key)) {
         return (
@@ -92,7 +104,7 @@ const AddChannel = ({
             className={styles.searchInput}
             value={contactsform.searchQuery}
             onChange={event => searchUpdated(event.target.value)}
-          // ref={input => input && input.focus()}
+            ref={this.searchInput}
           />
           <span onClick={closeContactsForm} className={styles.closeIcon}>
             <Isvg src={x} />
@@ -137,6 +149,7 @@ const AddChannel = ({
         )}
       </div>
     )
+  }
 }
 
 AddChannel.propTypes = {

app/components/Contacts/SubmitChannelForm.js

@@ -8,6 +8,17 @@ import AmountInput from 'components/AmountInput'
 import styles from './SubmitChannelForm.scss'
 
 class SubmitChannelForm extends React.Component {
+  constructor(props) {
+    super(props)
+    this.amountInput = React.createRef()
+  }
+
+  componentDidMount() {
+    // Clear and Focus the amount input field.
+    this.amountInput.current.clearTextInput()
+    this.amountInput.current.focusTextInput()
+  }
+
   render() {
     const {
       closeChannelForm,
@@ -107,6 +118,7 @@ class SubmitChannelForm extends React.Component {
               amount={contactCapacity}
               currency={ticker.currency}
               onChangeEvent={updateContactCapacity}
+              ref={this.amountInput}
             />
             <div className={styles.currency}>
               <section