feat(Input): expose select() method from ref (Semantic-Org#2928)

feat(Input): expose select() method from ref
ladp333 · Jul 6, 2018 · a27a917 · a27a917
1 parent a9de819
commit a27a917
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
@@ -117,6 +117,8 @@ class Input extends Component {
 
   focus = () => this.inputRef.focus()
 
+  select = () => this.inputRef.select()
+
   handleChange = (e) => {
     const value = _.get(e, 'target.value')
 

diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
@@ -71,9 +71,14 @@ describe('Input', () => {
 
   common.propKeyAndValueToClassName(Input, 'actionPosition', ['left'], { className: 'action' })
   common.propKeyAndValueToClassName(Input, 'iconPosition', ['left'], { className: 'icon' })
-  common.propKeyAndValueToClassName(Input, 'labelPosition', ['left', 'right', 'left corner', 'right corner'], {
-    className: 'labeled',
-  })
+  common.propKeyAndValueToClassName(
+    Input,
+    'labelPosition',
+    ['left', 'right', 'left corner', 'right corner'],
+    {
+      className: 'labeled',
+    },
+  )
 
   common.propKeyOnlyToClassName(Input, 'action')
   common.propKeyOnlyToClassName(Input, 'disabled')
@@ -113,13 +118,9 @@ describe('Input', () => {
         const wrapper = shallow(<Input {...{ [propName]: propValue }} />)
 
         // account for overloading the onChange prop
-        const expectedValue = propName === 'onChange'
-          ? wrapper.instance().handleChange
-          : propValue
+        const expectedValue = propName === 'onChange' ? wrapper.instance().handleChange : propValue
 
-        wrapper
-          .find('input')
-          .should.have.prop(propName, expectedValue)
+        wrapper.find('input').should.have.prop(propName, expectedValue)
       })
 
       it(`passes \`${propName}\` to the <input> when using children`, () => {
@@ -131,13 +132,9 @@ describe('Input', () => {
         )
 
         // account for overloading the onChange prop
-        const expectedValue = propName === 'onChange'
-          ? wrapper.instance().handleChange
-          : propValue
+        const expectedValue = propName === 'onChange' ? wrapper.instance().handleChange : propValue
 
-        wrapper
-          .find('input')
-          .should.have.prop(propName, expectedValue)
+        wrapper.find('input').should.have.prop(propName, expectedValue)
       })
     })
   })
@@ -158,6 +155,25 @@ describe('Input', () => {
     })
   })
 
+  describe('select', () => {
+    it('can be set via a ref', () => {
+      const mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+
+      const value = 'expect this text to be selected'
+      const wrapper = mount(<Input value={value} />, { attachTo: mountNode })
+      wrapper.instance().select()
+
+      window
+        .getSelection()
+        .toString()
+        .should.equal(value)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+  })
+
   describe('loading', () => {
     it("don't add icon if it's defined", () => {
       shallow(<Input icon='user' loading />)
@@ -210,7 +226,12 @@ describe('Input', () => {
       const mountNode = document.createElement('div')
       document.body.appendChild(mountNode)
 
-      const wrapper = mount(<Input><input ref={ref} /></Input>, { attachTo: mountNode })
+      const wrapper = mount(
+        <Input>
+          <input ref={ref} />
+        </Input>,
+        { attachTo: mountNode },
+      )
       const input = document.querySelector('.ui.input input')
 
       ref.should.have.been.calledOnce()