Bitcoin fees field to handle Custom properly

src/components/FeesField/BitcoinKind.js

@@ -50,10 +50,9 @@ const customItem = {
   feePerByte: 0,
 }
 
-class FeesField extends Component<
+type State = { isFocused: boolean, items: FeeItem[], selectedItem: FeeItem }
-  Props & { fees?: Fees, error?: Error },
+
-  { 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 })
+    const patch: $Shape<State> = { selectedItem }
-    if (selectedItem.feePerByte) onChange(selectedItem.feePerByte)
+    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 }}

src/components/base/Input/index.js

@@ -151,9 +151,12 @@ class Input extends PureComponent<Props, State> {
     onBlur(e)
   }
 
-  handleSelectEverything = () => {
+  select = () => {
-    this._input && this._input.setSelectionRange(0, this._input.value.length)
+    const { _input } = this
-    this._input && this._input.focus()
+    if (_input) {
+      _input.select()
+      _input.focus()
+    }
   }
 
   _input = null

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}