Skip to content

Commit

Permalink
fix: Workaround for Firefox outside click issue (#177)
Browse files Browse the repository at this point in the history
Closes #148
  • Loading branch information
mrchief committed Sep 16, 2018
1 parent 3e41056 commit 42fd226
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 9 deletions.
2 changes: 2 additions & 0 deletions __snapshots__/src/checkbox/index.test.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Generated by [AVA](https://ava.li).
<input
className="sample"
onChange={Function {}}
type="checkbox"
/>

Expand All @@ -19,5 +20,6 @@ Generated by [AVA](https://ava.li).
<input
disabled={true}
onChange={Function {}}
type="checkbox"
/>
Binary file modified __snapshots__/src/checkbox/index.test.js.snap
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/bundle.js

Large diffs are not rendered by default.

11 changes: 10 additions & 1 deletion src/checkbox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
}
}

Expand Down
14 changes: 14 additions & 0 deletions src/checkbox/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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)
})
11 changes: 4 additions & 7 deletions src/tag/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" />))
Expand All @@ -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'))
})

Expand All @@ -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)
})

0 comments on commit 42fd226

Please sign in to comment.