fix: Workaround for Firefox outside click issue (#177)

Closes #148

Author: mrchief

__snapshots__/src/checkbox/index.test.js.md

@@ -10,6 +10,7 @@ Generated by [AVA](https://ava.li).
 
     <input
       className="sample"
+      onChange={Function {}}
       type="checkbox"
     />
 
@@ -19,5 +20,6 @@ Generated by [AVA](https://ava.li).
 
     <input
       disabled={true}
+      onChange={Function {}}
       type="checkbox"
     />

__snapshots__/src/checkbox/index.test.js.snap

@@ -15,10 +15,19 @@ class Checkbox extends PureComponent {
     onChange: PropTypes.func
   }
 
+  // this (stopPropagation) is needed since FireFox wrongly detects inside clicks
+  // See https://github.com/dowjones/react-dropdown-tree-select/pull/154
+  // and https://github.com/dowjones/react-dropdown-tree-select/issues/148
+  handleChange = e => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    this.props.onChange(e)
+  }
+
   render() {
     const { checked, indeterminate = false, onChange, ...rest } = this.props
 
-    return <input type="checkbox" ref={refUpdater({ checked, indeterminate })} onChange={onChange} {...rest} />
+    return <input type="checkbox" ref={refUpdater({ checked, indeterminate })} onChange={this.handleChange} {...rest} />
   }
 }
 

docs/bundle.js

@@ -2,6 +2,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 import test from 'ava'
 import toJson from 'enzyme-to-json'
+import { spy } from 'sinon'
 
 import Checkbox, { refUpdater } from './index'
 
@@ -26,3 +27,16 @@ test('renders disabled state', t => {
   const tree = toJson(shallow(<Checkbox disabled />))
   t.snapshot(tree)
 })
+
+test('call stopPropagation and stopImmediatePropagation when clicked', t => {
+  const onChange = spy()
+  const wrapper = shallow(<Checkbox className="sample" onChange={onChange} />)
+  const event = {
+    stopPropagation: spy(),
+    nativeEvent: { stopImmediatePropagation: spy() }
+  }
+  wrapper.simulate('change', event)
+  t.true(onChange.called)
+  t.true(event.stopPropagation.called)
+  t.true(event.nativeEvent.stopImmediatePropagation.called)
+})

src/checkbox/index.js

@@ -6,7 +6,7 @@ import toJson from 'enzyme-to-json'
 
 import Tag from './index'
 
-const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } }
+const mockEvent = { nativeEvent: { stopImmediatePropagation: spy() } }
 
 test('renders label when passed in', t => {
   const wrapper = toJson(shallow(<Tag label="hello" id="abc" />))
@@ -19,20 +19,17 @@ test('call stopPropagation and stopImmediatePropagation when pill is closed', t
   const event = {
     type: 'click',
     stopPropagation: spy(),
-    nativeEvent: {
-      stopImmediatePropagation: spy()
-    }
+    nativeEvent: { stopImmediatePropagation: spy() }
   }
   wrapper.find('.tag-remove').prop('onClick')(event)
   t.true(event.stopPropagation.called)
   t.true(event.nativeEvent.stopImmediatePropagation.called)
 })
 
-
 test('call onDelete handler when pill is closed', t => {
   const onDelete = spy()
   const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} />)
-  wrapper.find('.tag-remove').simulate('click', nativeEvent)
+  wrapper.find('.tag-remove').simulate('click', mockEvent)
   t.true(onDelete.calledWith('abc'))
 })
 
@@ -42,6 +39,6 @@ test('should not cause form submit', t => {
   const wrapper = mount(<form onSubmit={onSubmit}>
     <Tag label="hello" id="abc" onDelete={onDelete} />
   </form>)
-  wrapper.find('.tag-remove').simulate('click', nativeEvent)
+  wrapper.find('.tag-remove').simulate('click', mockEvent)
   t.false(onSubmit.called)
 })