From 6efe8a3c97d423592e4f80cc20e439c5b6b75a8c Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Fri, 17 Mar 2017 23:41:05 -0700
Subject: [PATCH] feat(Input): add focus() method

---
 .../Input/Usage/InputExampleRefFocus.js       | 23 +++++++++++++++++++
 .../Examples/elements/Input/Usage/index.js    | 15 ++++++++++++
 docs/app/Examples/elements/Input/index.js     |  2 ++
 src/elements/Input/Input.js                   |  7 ++++++
 test/specs/elements/Input/Input-test.js       | 16 +++++++++++++
 5 files changed, 63 insertions(+)
 create mode 100644 docs/app/Examples/elements/Input/Usage/InputExampleRefFocus.js
 create mode 100644 docs/app/Examples/elements/Input/Usage/index.js

diff --git a/docs/app/Examples/elements/Input/Usage/InputExampleRefFocus.js b/docs/app/Examples/elements/Input/Usage/InputExampleRefFocus.js
new file mode 100644
index 0000000000..e91630090a
--- /dev/null
+++ b/docs/app/Examples/elements/Input/Usage/InputExampleRefFocus.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Input, Button } from 'semantic-ui-react'
+
+class InputExampleRefFocus extends Component {
+  handleRef = c => {
+    this.inputRef = c
+  }
+
+  focus = () => {
+    this.inputRef.focus()
+  }
+
+  render() {
+    return (
+      <div>
+        <Button content='focus' onClick={this.focus} />
+        <Input ref={this.handleRef} placeholder='Search...' />
+      </div>
+    )
+  }
+}
+
+export default InputExampleRefFocus
diff --git a/docs/app/Examples/elements/Input/Usage/index.js b/docs/app/Examples/elements/Input/Usage/index.js
new file mode 100644
index 0000000000..feb2edd877
--- /dev/null
+++ b/docs/app/Examples/elements/Input/Usage/index.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const InputUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Focus'
+      description='An input can be focused via a ref.'
+      examplePath='elements/Input/Usage/InputExampleRefFocus'
+    />
+  </ExampleSection>
+)
+
+export default InputUsageExamples
diff --git a/docs/app/Examples/elements/Input/index.js b/docs/app/Examples/elements/Input/index.js
index f1137a85ee..3a5fb83aba 100644
--- a/docs/app/Examples/elements/Input/index.js
+++ b/docs/app/Examples/elements/Input/index.js
@@ -2,12 +2,14 @@ import React from 'react'
 import Types from './Types'
 import States from './States'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const InputExamples = () => (
   <div>
     <Types />
     <States />
     <Variations />
+    <Usage />
   </div>
 )
 
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 8688caff61..dffb1fc0da 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -121,6 +121,12 @@ class Input extends Component {
     onChange(e, { ...this.props, value })
   }
 
+  focus = () => {
+    this.inputRef.focus()
+  }
+
+  handleInputRef = c => (this.inputRef = c)
+
   render() {
     const {
       action,
@@ -168,6 +174,7 @@ class Input extends Component {
     const [htmlInputProps, rest] = partitionHTMLInputProps({ ...unhandled, type })
 
     if (onChange) htmlInputProps.onChange = this.handleChange
+    htmlInputProps.ref = this.handleInputRef
 
     // tabIndex
     if (!_.isNil(tabIndex)) htmlInputProps.tabIndex = tabIndex
diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
index 597084c997..23400ee33d 100644
--- a/test/specs/elements/Input/Input-test.js
+++ b/test/specs/elements/Input/Input-test.js
@@ -202,4 +202,20 @@ describe('Input', () => {
         .should.have.prop('tabIndex', 123)
     })
   })
+
+  describe('focus', () => {
+    it('can be set via a ref', () => {
+      const mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+
+      const wrapper = mount(<Input />, { attachTo: mountNode })
+      wrapper.instance().focus()
+
+      const input = document.querySelector('.ui.input input')
+      document.activeElement.should.equal(input)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+  })
 })