From 5ae6e27a2a6aea209c071593a8eb54beef64ab43 Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Mon, 7 Jan 2019 17:16:25 +0100
Subject: [PATCH 1/2] LL-659 fix autofocus on add account modal

---
 src/components/base/Select/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 3551b4dc..7ae2daaf 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -37,6 +37,19 @@ export type Option = {
 }
 
 class Select extends PureComponent<Props> {
+  componentDidMount() {
+    if (this.ref) {
+      // $FlowFixMe
+      this.timeout = setTimeout(() => this.ref.focus(), 16)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+  }
+
   handleChange = (value, { action }) => {
     const { onChange } = this.props
     if (action === 'select-option') {
@@ -47,6 +60,9 @@ class Select extends PureComponent<Props> {
     }
   }
 
+  ref: *
+  timeout: *
+
   render() {
     const {
       value,
@@ -68,6 +84,7 @@ class Select extends PureComponent<Props> {
 
     return (
       <ReactSelect
+        ref={c => (this.ref = c)}
         value={value}
         maxMenuHeight={300}
         classNamePrefix="select"

From d0c0c2c41564a8c7468d39356c8015eb2f268943 Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Tue, 8 Jan 2019 11:41:09 +0100
Subject: [PATCH 2/2] autofocus on input only if autoFocus prop is present

---
 src/components/SelectCurrency/index.js | 12 +++++++++++-
 src/components/base/Select/index.js    |  7 ++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/SelectCurrency/index.js b/src/components/SelectCurrency/index.js
index 0ba3bab4..97823765 100644
--- a/src/components/SelectCurrency/index.js
+++ b/src/components/SelectCurrency/index.js
@@ -18,6 +18,7 @@ type OwnProps = {
   currencies?: CryptoCurrency[],
   value?: CryptoCurrency,
   placeholder: string,
+  autoFocus?: boolean,
   t: T,
 }
 
@@ -29,12 +30,21 @@ const mapStateToProps = (state, props: OwnProps) => ({
   currencies: props.currencies || availableCurrencies(state),
 })
 
-const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => {
+const SelectCurrency = ({
+  onChange,
+  value,
+  t,
+  placeholder,
+  currencies,
+  autoFocus,
+  ...props
+}: Props) => {
   const options = currencies
     ? currencies.map(c => ({ ...c, value: c.id, label: c.name, currency: c }))
     : []
   return (
     <Select
+      autoFocus={autoFocus}
       value={value}
       renderOption={renderOption}
       renderValue={renderOption}
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 7ae2daaf..ec8b8587 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -28,6 +28,7 @@ type Props = {
   small: boolean,
   width: number,
   minWidth: number,
+  autoFocus: boolean,
 }
 
 export type Option = {
@@ -38,15 +39,15 @@ export type Option = {
 
 class Select extends PureComponent<Props> {
   componentDidMount() {
-    if (this.ref) {
+    if (this.ref && this.props.autoFocus) {
       // $FlowFixMe
-      this.timeout = setTimeout(() => this.ref.focus(), 16)
+      this.timeout = requestAnimationFrame(() => this.ref.focus())
     }
   }
 
   componentWillUnmount() {
     if (this.timeout) {
-      clearTimeout(this.timeout)
+      cancelAnimationFrame(this.timeout)
     }
   }