#trivial : fix inputs eslint issues

react/components/Input/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../Button'
@@ -13,6 +13,8 @@ class Input extends Component {
     this.state = {
       active: false,
     }
+
+    this.ref = createRef(null)
   }
 
   handleChange = event => {
@@ -32,17 +34,17 @@ class Input extends Component {
   }
 
   handleFocus = event => {
-    if (!this.props.readOnly) {
-      this.setState({ active: true })
-      this.props.onFocus && this.props.onFocus(event)
-    }
+    if (this.props.readOnly) return
+
+    this.setState({ active: true })
+    this.props.onFocus && this.props.onFocus(event)
   }
 
   handleBlur = event => {
-    if (!this.props.readOnly) {
-      this.setState({ active: false })
-      this.props.onBlur && this.props.onBlur(event)
-    }
+    if (this.props.readOnly) return
+
+    this.setState({ active: false })
+    this.props.onBlur && this.props.onBlur(event)
   }
 
   handleMouseEnter = event => {
@@ -53,6 +55,17 @@ class Input extends Component {
     this.props.onMouseLeave && this.props.onMouseLeave(event)
   }
 
+  handleAutoFocus = () => {
+    const { forwardedRef, autoFocus } = this.props
+    if (!autoFocus) return
+
+    if (forwardedRef && forwardedRef.current) {
+      forwardedRef.current.focus()
+    } else if (this.ref.current) {
+      this.ref.focus()
+    }
+  }
+
   componentDidMount() {
     if (this.props.size === 'x-large') {
       console.warn(
@@ -71,6 +84,12 @@ class Input extends Component {
         'You should not use both prefix and suffix props in the same input. '
       )
     }
+
+    this.handleAutoFocus()
+  }
+
+  componentDidUpdate() {
+    this.handleAutoFocus()
   }
 
   render() {
@@ -208,7 +227,7 @@ class Input extends Component {
           )}
           <input
             {...dataAttrs}
-            ref={this.props.forwardedRef}
+            ref={this.props.forwardedRef || this.ref}
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
             onChange={this.handleChange}
@@ -222,7 +241,6 @@ class Input extends Component {
             accept={this.props.accept}
             autoComplete={this.props.autoComplete}
             autoCorrect={this.props.autoCorrect}
-            autoFocus={this.props.autoFocus}
             autoSave={this.props.autoSave}
             defaultValue={this.props.defaultValue}
             inputMode={this.props.inputMode}

react/components/InputCurrency/index.js

@@ -25,10 +25,14 @@ BaseInput.propTypes = {
 }
 
 const baseNumber = 9999999999.9999999999
+const defaultEvent = { target: null }
 
 class InputCurrency extends Component {
   handleChange = ({ floatValue }) => {
     const { onChange } = this.props
+    const ssr = typeof document === 'undefined' || typeof window === 'undefined'
+    const event = ssr ? defaultEvent : window.event
+
     onChange &&
       onChange({
         ...event,

react/components/InputPassword/index.js

@@ -18,7 +18,16 @@ class InputPassword extends Component {
     showPassword: false,
   }
 
-  toggle = () => this.setState(state => ({ showPassword: !state.showPassword }))
+  handleToggle = () =>
+    this.setState(state => ({ showPassword: !state.showPassword }))
+
+  handleKeyPress = ({ key }) => {
+    const SPACE = ' '
+    const ENTER = 'Enter'
+    if (key === SPACE || key === ENTER) {
+      this.handleToggle()
+    }
+  }
 
   render() {
     const iconSize =
@@ -32,7 +41,13 @@ class InputPassword extends Component {
         token
         spellCheck="false"
         suffix={
-          <span className="pointer pt2" onClick={() => this.toggle()}>
+          <span
+            className="pointer pt2"
+            onClick={this.handleToggle}
+            role="button"
+            tabIndex={0}
+            onKeyPress={this.handleKeyPress}
+          >
             {this.state.showPassword ? (
               <VisibilityOff solid size={iconSize} />
             ) : (

react/components/InputSearch/index.js

@@ -48,10 +48,19 @@ class InputSearch extends Component {
           ...event.target,
           value,
         },
-        preventDefault: event.preventDefault || (() => {}),
+        preventDefault: event.preventDefault || (() => null),
       })
   }
 
+  handleKeyPress = (event, handler) => {
+    const SPACE = ' '
+    const ENTER = 'Enter'
+    const { key } = event
+    if (key === SPACE || key === ENTER) {
+      handler(event)
+    }
+  }
+
   handleHovering = hover => {
     this.setState({ hover })
   }
@@ -60,6 +69,8 @@ class InputSearch extends Component {
     this.setState({ focus })
   }
 
+  pressedEnter = event => event.key === 'Enter'
+
   render() {
     const { hover, focus } = this.state
     const { size } = this.props
@@ -73,15 +84,17 @@ class InputSearch extends Component {
         onBlur={() => this.handleFocus(false)}
         onMouseEnter={() => this.handleHovering(true)}
         onMouseLeave={() => this.handleHovering(false)}
-        onKeyUp={e => e.key === 'Enter' && this.handleSubmit(e)}
+        onKeyUp={e => this.pressedEnter(e) && this.handleSubmit(e)}
         type="search"
         suffix={
           <div className="flex flex-row items-center">
             {this.props.value && (
               <span
-                tabIndex={0}
-                onClick={this.handleClickClear}
                 className="pointer mr4 c-muted-3"
+                onClick={this.handleClickClear}
+                onKeyPress={e => this.handleKeyPress(e, this.handleClickClear)}
+                role="button"
+                tabIndex={0}
               >
                 <ClearIcon size={iconSize} />
               </span>
@@ -96,7 +109,13 @@ class InputSearch extends Component {
                   InputSearch.separatorHeight.regular,
               }}
             />
-            <span className="pointer pl4 c-link" onClick={this.handleSubmit}>
+            <span
+              className="pointer pl4 c-link"
+              onClick={this.handleSubmit}
+              onKeyPress={e => this.handleKeyPress(e, this.handleSubmit)}
+              role="button"
+              tabIndex={0}
+            >
               <SearchIcon size={iconSize} />
             </span>
           </div>