fix(Checkbox): onFocus and onBlur events (#1361)

* fix(Checkbox): added onFocus prop

* fix(Checkbox): added handleFocus callback to be triggered

* fix(Checkbox): added onMouseDown event to invoke focus event

* fix: call user onMouseDown prop when onMouseDown event is trigger

* style: added onMouseDown to component propTypes

* Update Checkbox.js

* test: potential fix for checkbox test

* fix(Checkbox): onFocus and onBlur events

src/modules/Checkbox/Checkbox.d.ts

@@ -40,15 +40,23 @@ export interface CheckboxProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed checked/indeterminate state.
    */
-  onChange?: (event: React.FormEvent<HTMLInputElement>, data: this) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => void;
 
   /**
    * Called when the checkbox or label is clicked.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and current checked/indeterminate state.
    */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>, data: this) => void;
+  onClick?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void;
+
+  /**
+   * Called when the user presses down on the mouse.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and current checked/indeterminate state.
+   */
+  onMouseDown?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void;
 
   /** Format as a radio element. This means it is an exclusive option. */
   radio?: boolean;

src/modules/Checkbox/Checkbox.js

@@ -67,6 +67,14 @@ export default class Checkbox extends Component {
      */
     onClick: PropTypes.func,
 
+    /**
+     * Called when the user presses down on the mouse.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props and current checked/indeterminate state.
+     */
+    onMouseDown: PropTypes.func,
+
     /** Format as a radio element. This means it is an exclusive option. */
     radio: customPropTypes.every([
       PropTypes.bool,
@@ -132,10 +140,18 @@ export default class Checkbox extends Component {
     return !disabled && !readOnly && !(radio && checked)
   }
 
+  computeTabIndex = () => {
+    const { disabled, tabIndex } = this.props
+
+    if (!_.isNil(tabIndex)) return tabIndex
+    return disabled ? -1 : 0
+  }
+
   handleInputRef = c => (this.inputRef = c)
 
-  handleClick = (e) => {
+  handleClick = e => {
     debug('handleClick()')
+
     const { onChange, onClick } = this.props
     const { checked, indeterminate } = this.state
 
@@ -147,11 +163,22 @@ export default class Checkbox extends Component {
     }
   }
 
+  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 })
+  }
+
   // Note: You can't directly set the indeterminate prop on the input, so we
   // need to maintain a ref to the input and set it manually whenever the
   // component updates.
   setIndeterminate = () => {
     const { indeterminate } = this.state
+
     if (this.inputRef) this.inputRef.indeterminate = !!indeterminate
   }
 
@@ -164,7 +191,6 @@ export default class Checkbox extends Component {
       radio,
       readOnly,
       slider,
-      tabIndex,
       toggle,
       type,
       value,
@@ -189,19 +215,21 @@ export default class Checkbox extends Component {
     const rest = getUnhandledProps(Checkbox, this.props)
     const ElementType = getElementType(Checkbox, this.props)
 
-    let computedTabIndex
-    if (!_.isNil(tabIndex)) computedTabIndex = tabIndex
-    else computedTabIndex = disabled ? -1 : 0
-
     return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick} onChange={this.handleClick}>
+      <ElementType
+        {...rest}
+        className={classes}
+        onChange={this.handleClick}
+        onClick={this.handleClick}
+        onMouseDown={this.handleMouseDown}
+      >
         <input
           checked={checked}
           className='hidden'
           name={name}
           readOnly
           ref={this.handleInputRef}
-          tabIndex={computedTabIndex}
+          tabIndex={this.computeTabIndex()}
           type={type}
           value={value}
         />

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

@@ -161,6 +161,22 @@ describe('Checkbox', () => {
     })
   })
 
+  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')
+      document.activeElement.should.equal(input)
+
+      wrapper.detach()
+      document.body.removeChild(mountNode)
+    })
+  })
+
   describe('readOnly', () => {
     it('cannot be checked', () => {
       shallow(<Checkbox readOnly />)