From eb71b6c57924f96e898f984fdfbb4df77748e19b Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Wed, 5 Sep 2018 19:07:11 +0200
Subject: [PATCH] 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 |   6 +
 app/components/Form/Pay.js                |  17 ++
 app/components/Form/Request.js            | 197 ++++++++++++----------
 test/unit/components/Form/Pay.spec.js     |   8 +-
 test/unit/components/Form/Request.spec.js |   4 +-
 5 files changed, 138 insertions(+), 94 deletions(-)

diff --git a/app/components/AmountInput/AmountInput.js b/app/components/AmountInput/AmountInput.js
index b9efb05e..c44c3571 100644
--- a/app/components/AmountInput/AmountInput.js
+++ b/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}
diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js
index 9e7e726a..1ce3b9a4 100644
--- a/app/components/Form/Pay.js
+++ b/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} ${
diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js
index 82488a90..a8b9553e 100644
--- a/app/components/Form/Request.js
+++ b/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,100 +9,121 @@ import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 import styles from './Request.scss'
 
-const Request = ({
-  requestform: { amount, memo, showCurrencyFilters },
-  ticker,
-
-  setRequestAmount,
-  setRequestMemo,
-  setCurrency,
-  setRequestCurrencyFilters,
-  currencyName,
-  requestFiatAmount,
+class Request extends Component {
+  constructor(props) {
+    super(props)
+    this.amountInput = React.createRef()
+  }
 
-  currentCurrencyFilters,
+  componentDidMount() {
+    const { setRequestMemo, setRequestAmount } = this.props
 
-  onRequestSubmit
-}) => {
-  const onCurrencyFilterClick = currency => {
-    // change the input amount
-    setRequestAmount(btc.convert(ticker.currency, currency, amount))
+    // Clear the form of any previous data.
+    setRequestMemo('')
+    setRequestAmount('')
 
-    setCurrency(currency)
-    setRequestCurrencyFilters(false)
+    // Focus the amount input field.
+    this.amountInput.current.focusTextInput()
   }
 
-  return (
-    <div className={styles.container}>
-      <header className={styles.header}>
-        <Isvg src={hand} />
-        <h1>Request Payment</h1>
-      </header>
-
-      <div className={styles.content}>
-        <section className={styles.amount}>
-          <div className={styles.top}>
-            <label htmlFor="amount">Amount</label>
-            <span />
-          </div>
-          <div className={styles.bottom}>
-            <AmountInput
-              id="amount"
-              amount={amount}
-              currency={ticker.currency}
-              onChangeEvent={setRequestAmount}
-            />
-            <div className={styles.currency}>
-              <section
-                className={styles.currentCurrency}
-                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
-              >
-                <span>{currencyName}</span>
-                <span>
-                  <FaAngleDown />
-                </span>
-              </section>
-              <ul className={showCurrencyFilters ? styles.active : undefined}>
-                {currentCurrencyFilters.map(filter => (
-                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                    {filter.name}
-                  </li>
-                ))}
-              </ul>
+  render() {
+    const {
+      requestform: { amount, memo, showCurrencyFilters },
+      ticker,
+
+      setRequestAmount,
+      setRequestMemo,
+      setCurrency,
+      setRequestCurrencyFilters,
+      currencyName,
+      requestFiatAmount,
+
+      currentCurrencyFilters,
+
+      onRequestSubmit
+    } = this.props
+
+    const onCurrencyFilterClick = currency => {
+      // change the input amount
+      setRequestAmount(btc.convert(ticker.currency, currency, amount))
+
+      setCurrency(currency)
+      setRequestCurrencyFilters(false)
+    }
+
+    return (
+      <div className={styles.container}>
+        <header className={styles.header}>
+          <Isvg src={hand} />
+          <h1>Request Payment</h1>
+        </header>
+
+        <div className={styles.content}>
+          <section className={styles.amount}>
+            <div className={styles.top}>
+              <label htmlFor="amount">Amount</label>
+              <span />
+            </div>
+            <div className={styles.bottom}>
+              <AmountInput
+                id="amount"
+                amount={amount}
+                currency={ticker.currency}
+                onChangeEvent={setRequestAmount}
+                ref={this.amountInput}
+              />
+              <div className={styles.currency}>
+                <section
+                  className={styles.currentCurrency}
+                  onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
+                >
+                  <span>{currencyName}</span>
+                  <span>
+                    <FaAngleDown />
+                  </span>
+                </section>
+                <ul className={showCurrencyFilters ? styles.active : undefined}>
+                  {currentCurrencyFilters.map(filter => (
+                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
+                      {filter.name}
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
-          </div>
-
-          <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
-            ticker.fiatTicker
-          }`}</div>
-        </section>
-
-        <section className={styles.memo}>
-          <div className={styles.top}>
-            <label htmlFor="memo">Memo</label>
-          </div>
-          <div className={styles.bottom}>
-            <input
-              type="text"
-              placeholder="Details about the request"
-              value={memo}
-              onChange={event => setRequestMemo(event.target.value)}
-              id="memo"
-            />
-          </div>
-        </section>
-
-        <section className={styles.submit}>
-          <div
-            className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
-            onClick={onRequestSubmit}
-          >
-            Request
-          </div>
-        </section>
+
+            <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
+              ticker.fiatTicker
+            }`}</div>
+          </section>
+
+          <section className={styles.memo}>
+            <div className={styles.top}>
+              <label htmlFor="memo">Memo</label>
+            </div>
+            <div className={styles.bottom}>
+              <input
+                type="text"
+                placeholder="Details about the request"
+                value={memo}
+                onChange={event => setRequestMemo(event.target.value)}
+                id="memo"
+              />
+            </div>
+          </section>
+
+          <section className={styles.submit}>
+            <div
+              className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
+              onClick={onRequestSubmit}
+            >
+              Request
+            </div>
+          </section>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 Request.propTypes = {
diff --git a/test/unit/components/Form/Pay.spec.js b/test/unit/components/Form/Pay.spec.js
index ef1503e1..8cf504e5 100644
--- a/test/unit/components/Form/Pay.spec.js
+++ b/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)
diff --git a/test/unit/components/Form/Request.spec.js b/test/unit/components/Form/Request.spec.js
index 7a5976e9..0df1c97b 100644
--- a/test/unit/components/Form/Request.spec.js
+++ b/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)
     })