fixing the input focus issue when clicking on the icon

Author: alinais

src/components/Input/Input.tsx

@@ -14,6 +14,7 @@ import {
 import inputRules from './inputRules'
 import inputVariables from './inputVariables'
 import Icon from '../Icon'
+import callable from '../../lib/callable'
 
 /**
  * An Input
@@ -54,11 +55,20 @@ class Input extends UIComponent<any, any> {
     type: 'text',
   }
 
+  inputRef: any
+
+  computeTabIndex = props => {
+    if (!_.isNil(props.tabIndex)) return props.tabIndex
+    if (props.onClick) return 0
+  }
+
   handleChildOverrides = (child, defaultProps) => ({
     ...defaultProps,
     ...child.props,
   })
 
+  handleInputRef = c => (this.inputRef = c)
+
   partitionProps = () => {
     const { type } = this.props
 
@@ -69,6 +79,7 @@ class Input extends UIComponent<any, any> {
       {
         ...htmlInputProps,
         type,
+        onClick: () => this.inputRef.focus(),
       },
       rest,
     ]
@@ -81,6 +92,12 @@ class Input extends UIComponent<any, any> {
     return null
   }
 
+  handleIconOverrides = predefinedProps => {
+    return {
+      tabIndex: this.computeTabIndex,
+    }
+  }
+
   renderComponent({ ElementType, classes, rest }) {
     const { children, className, icon, input, type } = this.props
     const [htmlInputProps, restProps] = this.partitionProps()
@@ -109,9 +126,15 @@ class Input extends UIComponent<any, any> {
         <ElementType {...rest} className={classes.root} {...htmlInputProps}>
           {createHTMLInput(input || type, {
             defaultProps: htmlInputProps,
-            overrideProps: { className: inputClasses },
+            overrideProps: {
+              className: inputClasses,
+              ref: this.handleInputRef,
+            },
+          })}
+          {Icon.create(this.computeIcon(), {
+            defaultProps: { className: iconClasses },
+            overrideProps: predefinedProps => this.handleIconOverrides,
           })}
-          <Icon name={this.computeIcon()} className={iconClasses} />
         </ElementType>
       )
     }
@@ -120,7 +143,10 @@ class Input extends UIComponent<any, any> {
       <ElementType {...rest} className={classes.root} {...htmlInputProps}>
         {createHTMLInput(input || type, {
           defaultProps: htmlInputProps,
-          overrideProps: { className: inputClasses },
+          overrideProps: {
+            className: inputClasses,
+            ref: this.handleInputRef,
+          },
         })}
       </ElementType>
     )

src/components/Input/inputRules.ts

@@ -31,6 +31,7 @@ const inputRules = {
     return {
       position: variables.iconPosition,
       right: variables.iconRight,
+      outline: 0,
     }
   },
 }