From cb9ccb6c9399d02e1e29c1c75f933758ab320b32 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sat, 17 Aug 2019 11:25:20 +0200
Subject: [PATCH] fix(ui): ensure request form amount autofocus

---
 renderer/components/Form/Input.js      | 12 ++++++++----
 renderer/components/Form/TextArea.js   | 12 ++++++++----
 renderer/components/Request/Request.js | 20 +++++---------------
 renderer/containers/ModalStack.js      | 17 ++++++++++++-----
 4 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/renderer/components/Form/Input.js b/renderer/components/Form/Input.js
index 2be97f94060..d1405fefee2 100644
--- a/renderer/components/Form/Input.js
+++ b/renderer/components/Form/Input.js
@@ -21,6 +21,12 @@ const SearchIcon = styled(Search)`
 // Create an html input element that accepts all style props from styled-system.
 export const SystemInput = createSystemInput('input')
 
+const maybeFocusRef = ref => {
+  if (ref.current && document.activeElement !== ref.current) {
+    ref.current.focus()
+  }
+}
+
 const Input = ({
   description,
   onChange,
@@ -55,10 +61,8 @@ const Input = ({
   const { value, maskedValue, error, asyncError } = fieldState
 
   useLayoutEffect(() => {
-    if (willAutoFocus) {
-      forwardedRef.current.focus()
-    }
-  }, [willAutoFocus, forwardedRef])
+    willAutoFocus && maybeFocusRef(forwardedRef)
+  }, [forwardedRef, willAutoFocus])
 
   const getValue = () => {
     if (typeof value === 'undefined') {
diff --git a/renderer/components/Form/TextArea.js b/renderer/components/Form/TextArea.js
index f15a9cd8a28..9e11e11b470 100644
--- a/renderer/components/Form/TextArea.js
+++ b/renderer/components/Form/TextArea.js
@@ -13,6 +13,12 @@ import { createSystemInput } from './util'
 // Create an html input element that accepts all style props from styled-system.
 export const SystemTextArea = createSystemInput('textarea')
 
+const maybeFocusRef = ref => {
+  if (ref.current && document.activeElement !== ref.current) {
+    ref.current.focus()
+  }
+}
+
 const TextArea = ({
   description,
   onChange,
@@ -42,10 +48,8 @@ const TextArea = ({
   const { value, maskedValue, error, asyncError } = fieldState
 
   useLayoutEffect(() => {
-    if (willAutoFocus) {
-      forwardedRef.current.focus()
-    }
-  }, [forwardedRef, willAutoFocus])
+    willAutoFocus && maybeFocusRef(forwardedRef)
+  }, [willAutoFocus, forwardedRef])
 
   const getValue = () => {
     if (typeof value === 'undefined') {
diff --git a/renderer/components/Request/Request.js b/renderer/components/Request/Request.js
index 5dd4c9157cd..06f8d11fa18 100644
--- a/renderer/components/Request/Request.js
+++ b/renderer/components/Request/Request.js
@@ -27,6 +27,7 @@ class Request extends React.Component {
     fetchTickers: PropTypes.func.isRequired,
     intl: intlShape.isRequired,
     invoice: PropTypes.object,
+    isAnimating: PropTypes.bool,
     isProcessing: PropTypes.bool,
     payReq: PropTypes.string,
     showNotification: PropTypes.func.isRequired,
@@ -39,12 +40,6 @@ class Request extends React.Component {
 
   amountInput = React.createRef()
 
-  componentDidMount() {
-    const { fetchTickers } = this.props
-    fetchTickers()
-    this.focusAmountInput()
-  }
-
   componentDidUpdate(prevProps) {
     const { payReq } = this.props
     const { currentStep } = this.state
@@ -103,15 +98,6 @@ class Request extends React.Component {
     this.formApi = formApi
   }
 
-  /**
-   * focusAmountInput - Focus the amount input.
-   */
-  focusAmountInput = () => {
-    if (this.amountInput.current) {
-      this.amountInput.current.focus()
-    }
-  }
-
   renderHelpText = () => {
     const { chainName, cryptoUnitName } = this.props
     return (
@@ -125,12 +111,14 @@ class Request extends React.Component {
   }
 
   renderAmountFields = () => {
+    const { isAnimating } = this.props
     return (
       <CurrencyFieldGroup
         formApi={this.formApi}
         forwardedRef={this.amountInput}
         isRequired
         mb={3}
+        willAutoFocus={!isAnimating}
       />
     )
   }
@@ -186,12 +174,14 @@ class Request extends React.Component {
       fetchTickers,
       intl,
       isProcessing,
+      isAnimating,
       invoice,
       payReq,
       showNotification,
       ...rest
     } = this.props
     const { currentStep } = this.state
+
     return (
       <Form
         css={`
diff --git a/renderer/containers/ModalStack.js b/renderer/containers/ModalStack.js
index dc999ffb5c6..f56a9fb530c 100644
--- a/renderer/containers/ModalStack.js
+++ b/renderer/containers/ModalStack.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { animated, Transition } from 'react-spring/renderprops.cjs'
@@ -21,7 +21,7 @@ const Container = styled(animated.div)`
   ${ModalOverlayStyles}
 `
 
-const ModalContent = ({ type, closeModal }) => {
+const ModalContent = ({ type, closeModal, isAnimating }) => {
   switch (type) {
     case 'SETTINGS':
       return (
@@ -54,7 +54,7 @@ const ModalContent = ({ type, closeModal }) => {
     case 'REQUEST_FORM':
       return (
         <Modal onClose={closeModal} p={4}>
-          <Request mx="auto" width={9 / 16} />
+          <Request isAnimating={isAnimating} mx="auto" width={9 / 16} />
         </Modal>
       )
 
@@ -97,11 +97,12 @@ const ModalContent = ({ type, closeModal }) => {
 
 ModalContent.propTypes = {
   closeModal: PropTypes.func.isRequired,
+  isAnimating: PropTypes.bool,
   type: PropTypes.string.isRequired,
 }
 
 /**
- * ModalStack - Render modqals from the modal stack.
+ * ModalStack - Render modals from the modal stack.
  *
  * @param {{ modals, closeModal }} props Props
  * @returns {Node} Node
@@ -111,6 +112,10 @@ function ModalStack(props) {
   const doCloseModal = () => closeModal()
 
   useOnKeydown('Escape', closeModal)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  const onStart = () => setIsAnimating(true)
+  const onRest = () => setIsAnimating(false)
 
   return (
     <Transition
@@ -119,13 +124,15 @@ function ModalStack(props) {
       items={modals}
       keys={item => item.id}
       leave={{ opacity: 0, pointerEvents: 'none' }}
+      onRest={onRest}
+      onStart={onStart}
     >
       {modal =>
         modal &&
         /* eslint-disable react/display-name */
         (styles => (
           <Container style={styles}>
-            <ModalContent closeModal={doCloseModal} type={modal.type} />
+            <ModalContent closeModal={doCloseModal} isAnimating={isAnimating} type={modal.type} />
           </Container>
         ))
       }