Merge pull request #1736 from valpinkman/fix/autofocus-add-account

LL-659 fix autofocus on add account modal

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}

src/components/base/Select/index.js

@@ -28,6 +28,7 @@ type Props = {
   small: boolean,
   width: number,
   minWidth: number,
+  autoFocus: boolean,
 }
 
 export type Option = {
@@ -37,6 +38,19 @@ export type Option = {
 }
 
 class Select extends PureComponent<Props> {
+  componentDidMount() {
+    if (this.ref && this.props.autoFocus) {
+      // $FlowFixMe
+      this.timeout = requestAnimationFrame(() => this.ref.focus())
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      cancelAnimationFrame(this.timeout)
+    }
+  }
+
   handleChange = (value, { action }) => {
     const { onChange } = this.props
     if (action === 'select-option') {
@@ -47,6 +61,9 @@ class Select extends PureComponent<Props> {
     }
   }
 
+  ref: *
+  timeout: *
+
   render() {
     const {
       value,
@@ -68,6 +85,7 @@ class Select extends PureComponent<Props> {
 
     return (
       <ReactSelect
+        ref={c => (this.ref = c)}
         value={value}
         maxMenuHeight={300}
         classNamePrefix="select"