From ed1c530994aea5266f8c7cf6bc4606b010e6a812 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Sat, 30 Jun 2018 22:32:06 +0200
Subject: [PATCH] Bitcoin fees field to handle Custom properly

---
 src/components/FeesField/BitcoinKind.js    | 23 ++++++++++++++++------
 src/components/base/Input/index.js         |  9 ++++++---
 src/components/base/InputCurrency/index.js | 11 +++++++++++
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/FeesField/BitcoinKind.js b/src/components/FeesField/BitcoinKind.js
index e9458045..0410eae4 100644
--- a/src/components/FeesField/BitcoinKind.js
+++ b/src/components/FeesField/BitcoinKind.js
@@ -50,10 +50,9 @@ const customItem = {
   feePerByte: 0,
 }
 
-class FeesField extends Component<
-  Props & { fees?: Fees, error?: Error },
-  { isFocused: boolean, items: FeeItem[], selectedItem: FeeItem },
-> {
+type State = { isFocused: boolean, items: FeeItem[], selectedItem: FeeItem }
+
+class FeesField extends Component<Props & { fees?: Fees, error?: Error }, State> {
   state = {
     items: [customItem],
     selectedItem: customItem,
@@ -103,10 +102,21 @@ class FeesField extends Component<
 
   onSelectChange = selectedItem => {
     const { onChange } = this.props
-    this.setState({ selectedItem })
-    if (selectedItem.feePerByte) onChange(selectedItem.feePerByte)
+    const patch: $Shape<State> = { selectedItem }
+    if (selectedItem.feePerByte) {
+      onChange(selectedItem.feePerByte)
+    } else {
+      const { input } = this
+      if (!selectedItem.feePerByte && input.current) {
+        patch.isFocused = true
+        input.current.select()
+      }
+    }
+    this.setState(patch)
   }
 
+  input = React.createRef()
+
   render() {
     const { account, feePerByte, error, onChange, t } = this.props
     const { items, selectedItem } = this.state
@@ -118,6 +128,7 @@ class FeesField extends Component<
       <GenericContainer error={error} help={t('app:send.steps.amount.unitPerByte')}>
         <Select width={156} options={items} value={selectedItem} onChange={this.onSelectChange} />
         <InputCurrency
+          ref={this.input}
           defaultUnit={satoshi}
           units={units}
           containerProps={{ grow: true }}
diff --git a/src/components/base/Input/index.js b/src/components/base/Input/index.js
index ce210cc1..44ac36cc 100644
--- a/src/components/base/Input/index.js
+++ b/src/components/base/Input/index.js
@@ -151,9 +151,12 @@ class Input extends PureComponent<Props, State> {
     onBlur(e)
   }
 
-  handleSelectEverything = () => {
-    this._input && this._input.setSelectionRange(0, this._input.value.length)
-    this._input && this._input.focus()
+  select = () => {
+    const { _input } = this
+    if (_input) {
+      _input.select()
+      _input.focus()
+    }
   }
 
   _input = null
diff --git a/src/components/base/InputCurrency/index.js b/src/components/base/InputCurrency/index.js
index 336124e2..1e03d901 100644
--- a/src/components/base/InputCurrency/index.js
+++ b/src/components/base/InputCurrency/index.js
@@ -190,6 +190,16 @@ class InputCurrency extends PureComponent<Props, State> {
     )
   }
 
+  select = () => {
+    // TODO we should fowardRef so InputCurrency ref is on Input
+    this.input && this.input.select()
+  }
+
+  input: ?Input
+  onRef = (input: ?Input) => {
+    this.input = input
+  }
+
   render() {
     const { renderRight, showAllDigits, unit, subMagnitude } = this.props
     const { displayValue } = this.state
@@ -198,6 +208,7 @@ class InputCurrency extends PureComponent<Props, State> {
       <Input
         {...this.props}
         ff="Rubik"
+        ref={this.onRef}
         value={displayValue}
         onChange={this.handleChange}
         onFocus={this.handleFocus}