Merge pull request #747 from mrfelton/feat/autofocus-forms

fix(ui): autofocus forms

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,14 @@ class AmountInput extends React.Component {
     }
   }
 
+  focusTextInput() {
+    this.textInput.current.focus()
+  }
+
+  clearTextInput() {
+    this.textInput.current.value = ''
+  }
+
   parseNumber(_value) {
     let value = _value || ''
     if (typeof _value === 'string') {
@@ -143,6 +152,7 @@ class AmountInput extends React.Component {
         onBlur={this.handleBlur}
         onKeyDown={this.handleKeyDown}
         readOnly={readOnly}
+        ref={this.textInput}
         type="text"
         required
         value={amount}

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} />
@@ -138,6 +150,7 @@ const AddChannel = ({
       </div>
     )
   }
+}
 
 AddChannel.propTypes = {
   contactsform: PropTypes.object.isRequired,

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

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
@@ -104,6 +124,7 @@ const Request = ({
       </div>
     )
   }
+}
 
 Request.propTypes = {
   requestform: PropTypes.shape({

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)
     })