fix(ui): autofocus and clear pay and request forms

When the payment and request forms open ensure that the forms are empty
and the most relevant form field is selected by default.

Fix #389

app/components/AmountInput/AmountInput.js

@@ -7,6 +7,7 @@ class AmountInput extends React.Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleBlur = this.handleBlur.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.textInput = React.createRef()
   }
 
   setRules() {
@@ -41,6 +42,10 @@ class AmountInput extends React.Component {
     }
   }
 
+  focusTextInput() {
+    this.textInput.current.focus()
+  }
+
   parseNumber(_value) {
     let value = _value || ''
     if (typeof _value === 'string') {
@@ -143,6 +148,7 @@ class AmountInput extends React.Component {
         onBlur={this.handleBlur}
         onKeyDown={this.handleKeyDown}
         readOnly={readOnly}
+        ref={this.textInput}
         type="text"
         required
         value={amount}

app/components/Form/Pay.js

@@ -12,6 +12,22 @@ import AmountInput from 'components/AmountInput'
 import styles from './Pay.scss'
 
 class Pay extends Component {
+  constructor(props) {
+    super(props)
+    this.paymentRequestInput = React.createRef()
+  }
+
+  componentDidMount() {
+    const { setPayInput, setPayAmount } = this.props
+
+    // Clear the form of any previous data.
+    setPayInput('')
+    setPayAmount('')
+
+    // Focus the payment request input field.
+    this.paymentRequestInput.current.focus()
+  }
+
   componentDidUpdate(prevProps) {
     const {
       isLn,
@@ -110,6 +126,7 @@ class Pay extends Component {
                 onBlur={onPayInputBlur}
                 id="paymentRequest"
                 rows="4"
+                ref={this.paymentRequestInput}
               />
               <section
                 className={`${styles.errorMessage} ${

app/components/Form/Request.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import Isvg from 'react-inlinesvg'
@@ -9,7 +9,25 @@ import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 import styles from './Request.scss'
 
-const Request = ({
+class Request extends Component {
+  constructor(props) {
+    super(props)
+    this.amountInput = React.createRef()
+  }
+
+  componentDidMount() {
+    const { setRequestMemo, setRequestAmount } = this.props
+
+    // Clear the form of any previous data.
+    setRequestMemo('')
+    setRequestAmount('')
+
+    // Focus the amount input field.
+    this.amountInput.current.focusTextInput()
+  }
+
+  render() {
+    const {
       requestform: { amount, memo, showCurrencyFilters },
       ticker,
 
@@ -23,7 +41,8 @@ const Request = ({
       currentCurrencyFilters,
 
       onRequestSubmit
-}) => {
+    } = this.props
+
     const onCurrencyFilterClick = currency => {
       // change the input amount
       setRequestAmount(btc.convert(ticker.currency, currency, amount))
@@ -51,6 +70,7 @@ const Request = ({
                 amount={amount}
                 currency={ticker.currency}
                 onChangeEvent={setRequestAmount}
+                ref={this.amountInput}
               />
               <div className={styles.currency}>
                 <section
@@ -103,6 +123,7 @@ const Request = ({
         </div>
       </div>
     )
+  }
 }
 
 Request.propTypes = {

test/unit/components/Form/Pay.spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { configure, shallow } from 'enzyme'
+import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import Pay from 'components/Form/Pay'
@@ -45,7 +45,7 @@ const defaultProps = {
 
 describe('Form', () => {
   describe('should show the form without an input', () => {
-    const el = shallow(<Pay {...defaultProps} />)
+    const el = mount(<Pay {...defaultProps} />)
 
     it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)
@@ -54,7 +54,7 @@ describe('Form', () => {
 
   describe('should show lightning with a lightning input', () => {
     const props = { ...defaultProps, isLn: true }
-    const el = shallow(<Pay {...props} />)
+    const el = mount(<Pay {...props} />)
 
     it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)
@@ -63,7 +63,7 @@ describe('Form', () => {
 
   describe('should show on-chain with an on-chain input', () => {
     const props = { ...defaultProps, isOnchain: true }
-    const el = shallow(<Pay {...props} />)
+    const el = mount(<Pay {...props} />)
 
     it('should contain Pay', () => {
       expect(el.find('input#paymentRequest').props.value).toBe(undefined)

test/unit/components/Form/Request.spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { configure, shallow } from 'enzyme'
+import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import Request from 'components/Form/Request'
@@ -28,7 +28,7 @@ const defaultProps = {
 describe('Form', () => {
   describe('should show request form when formType is REQUEST_FORM', () => {
     const props = { ...defaultProps }
-    const el = shallow(<Request {...props} />)
+    const el = mount(<Request {...props} />)
     it('should contain Request', () => {
       expect(el.contains('Request')).toBe(true)
     })