New Address Selector Component (#3829)

* WIP new address selector

* WIP Working New Account Selector

* WIP Fully working Addres Selector (missing keyboards navigation)

* WIP Address Selector

* Fully functionnal new Address Selector!

* Implement disabled prop

* Don't auto-open on focus + Text Selection fix

* Add copy address capabilities

* Better Address Selector Focus

* Search from tags

* [Address Selector] Better Focus // Parity Background

* Linting

* [Adress Selector] Better focused input style

* Better focus support for inputs

* Fix style issue

* Add tags to accounts

* linting

* Add label to address selector

* Removed old address selector + improved styling

* Fixing address selection issues

* fix test

* Better logs...

* PR Grumbles Part 1

* PR Grumbles Part 2

* PR Grumbles Part 3.1

* PR Grumbles Part 3.2

* PR Grumbles Part 3.3

* New Portal Component

* Simpler Transition for Portal

* PR Grumbles Part 4

* Align font-family with rest of UI

* Fix null value input

* Fix Webpack build...

js/src/ui/Form/Input/input.js

@@ -39,6 +39,10 @@ const UNDERLINE_NORMAL = {
   borderBottom: 'solid 2px'
 };
 
+const UNDERLINE_FOCUSED = {
+  transform: 'scaleX(1.0)'
+};
+
 const NAME_ID = ' ';
 
 export default class Input extends Component {
@@ -51,6 +55,7 @@ export default class Input extends Component {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     error: nodeOrStringProptype(),
+    focused: PropTypes.bool,
     readOnly: PropTypes.bool,
     floatCopy: PropTypes.bool,
     hint: nodeOrStringProptype(),
@@ -61,9 +66,12 @@ export default class Input extends Component {
     multiLine: PropTypes.bool,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
+    onClick: PropTypes.func,
+    onFocus: PropTypes.func,
     onKeyDown: PropTypes.func,
     onSubmit: PropTypes.func,
     rows: PropTypes.number,
+    tabIndex: PropTypes.number,
     type: PropTypes.string,
     submitOnBlur: PropTypes.bool,
     style: PropTypes.object,
@@ -92,11 +100,20 @@ export default class Input extends Component {
     if ((newProps.value !== this.props.value) && (newProps.value !== this.state.value)) {
       this.setValue(newProps.value);
     }
+
+    if (newProps.focused && !this.props.focused) {
+      this.refs.input.setState({ isFocused: true });
+    }
+
+    if (!newProps.focused && this.props.focused) {
+      this.refs.input.setState({ isFocused: false });
+    }
   }
 
   render () {
     const { value } = this.state;
-    const { children, className, disabled, error, hideUnderline, hint, label, max, min, multiLine, rows, style, type } = this.props;
+    const { children, className, hideUnderline, disabled, error, focused, label } = this.props;
+    const { hint, onClick, onFocus, multiLine, rows, type, min, max, style, tabIndex } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
 
@@ -111,6 +128,11 @@ export default class Input extends Component {
       textFieldStyle.height = 'initial';
     }
 
+    const underlineStyle = readOnly ? UNDERLINE_READONLY : UNDERLINE_NORMAL;
+    const underlineFocusStyle = focused
+      ? UNDERLINE_FOCUSED
+      : readOnly && typeof focused !== 'boolean' ? { display: 'none' } : null;
+
     return (
       <div className={ styles.container } style={ style }>
         { this.renderCopyButton() }
@@ -130,15 +152,19 @@ export default class Input extends Component {
           name={ NAME_ID }
           onBlur={ this.onBlur }
           onChange={ this.onChange }
+          onClick={ onClick }
           onKeyDown={ this.onKeyDown }
+          onFocus={ onFocus }
           onPaste={ this.onPaste }
           readOnly={ readOnly }
+          ref='input'
           rows={ rows }
           style={ textFieldStyle }
+          tabIndex={ tabIndex }
           type={ type || 'text' }
           underlineDisabledStyle={ UNDERLINE_DISABLED }
-          underlineStyle={ readOnly ? UNDERLINE_READONLY : UNDERLINE_NORMAL }
-          underlineFocusStyle={ readOnly ? { display: 'none' } : null }
+          underlineStyle={ underlineStyle }
+          underlineFocusStyle={ underlineFocusStyle }
           underlineShow={ !hideUnderline }
           value={ value }>
           { children }