fix(Checkbox): focus should be obtained on mouseDown

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,24 @@ 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 })
   }
 
   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 })
+    _.invoke(this.inputRef, 'focus')
+
+    e.preventDefault()
   }
 
   // Note: You can't directly set the indeterminate prop on the input, so we

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

@@ -162,6 +162,26 @@ describe('Checkbox', () => {
   })
 
   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,
+      })
+    })
+    it('prevents default event', () => {
+      const preventDefault = sandbox.spy()
+      const wrapper = shallow(<Checkbox />)
+
+      wrapper.simulate('mousedown', { preventDefault })
+      preventDefault.should.have.been.calledOnce()
+    })
     it('sets focus to container', () => {
       const mountNode = document.createElement('div')
       document.body.appendChild(mountNode)