fix(Checkbox): focus should be obtained on click

src/modules/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import _ from 'lodash/fp'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -155,26 +155,22 @@ export default class Checkbox extends Component {
 
   handleClick = e => {
     debug('handleClick()')
-
-    const { onChange, onClick } = this.props
     const { checked, indeterminate } = this.state
 
-    if (this.canToggle()) {
-      if (onClick) onClick(e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
-      if (onChange) onChange(e, { ...this.props, checked: !checked, indeterminate: false })
+    if (!this.canToggle()) return
+
+    _.invoke(this.props, 'onClick', e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
+    _.invoke(this.props, 'onChange', e, { ...this.props, checked: !checked, indeterminate: false })
 
-      this.trySetState({ checked: !checked, indeterminate: false })
-    }
+    this.trySetState({ checked: !checked, indeterminate: false })
+    _.invoke(this.inputRef, 'focus')
   }
 
   handleMouseDown = e => {
     debug('handleMouseDown()')
-
-    const { onMouseDown } = this.props
     const { checked, indeterminate } = this.state
 
-    _.invoke('focus', this.inputRef)
-    if (onMouseDown) onMouseDown(e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
+    _.invoke(this.props, 'onMouseDown', e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
   }
 
   // Note: You can't directly set the indeterminate prop on the input, so we

test/specs/modules/Checkbox/Checkbox-test.js

@@ -159,24 +159,37 @@ describe('Checkbox', () => {
       mount(<Checkbox disabled onClick={spy} />).simulate('click')
       spy.should.not.have.been.called()
     })
-  })
-
-  describe('onMouseDown', () => {
     it('sets focus to container', () => {
       const mountNode = document.createElement('div')
       document.body.appendChild(mountNode)
 
       const wrapper = mount(<Checkbox />, { attachTo: mountNode })
       const input = document.querySelector('.ui.checkbox input')
 
-      wrapper.simulate('mousedown')
+      wrapper.simulate('click')
       document.activeElement.should.equal(input)
 
       wrapper.detach()
       document.body.removeChild(mountNode)
     })
   })
 
+  describe('onMouseDown', () => {
+    it('is called with (event { name, value, checked }) on label mouse down', () => {
+      const onMousedDown = sandbox.spy()
+      const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
+      mount(<Checkbox onMouseDown={onMousedDown} {...expectProps} />)
+        .simulate('mousedown')
+
+      onMousedDown.should.have.been.calledOnce()
+      onMousedDown.should.have.been.calledWithMatch({}, {
+        ...expectProps,
+        checked: expectProps.checked,
+        indeterminate: expectProps.indeterminate,
+      })
+    })
+  })
+
   describe('readOnly', () => {
     it('cannot be checked', () => {
       shallow(<Checkbox readOnly />)