feat(Input): add focus() method (#1477)

* fix(ComponentDoc): copy current editor code

* fix(Button): fix oneOfType propType

* feat(Input): add focus() method

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -129,7 +129,7 @@ class ComponentExample extends Component {
   }
 
   copyJSX = () => {
-    copyToClipboard(this.getOriginalSourceCode())
+    copyToClipboard(this.state.sourceCode)
     this.setState({ copiedCode: true })
     setTimeout(() => this.setState({ copiedCode: false }), 1000)
   }

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

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

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>
 )
 

src/elements/Button/ButtonOr.js

@@ -34,10 +34,10 @@ ButtonOr.propTypes = {
   className: PropTypes.string,
 
   /** Or buttons can have their text localized, or adjusted by using the text prop. */
-  text: PropTypes.oneOfType(
+  text: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
-  ),
+  ]),
 }
 
 export default ButtonOr

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

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)
+    })
+  })
 })