Skip to content

fix: Do not toggle dropwdown on pill removal #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 2, 2018
Merged

fix: Do not toggle dropwdown on pill removal #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bde09f0
fix: Fix dropdown toggle when any selected pill
priyanshu92 Aug 1, 2018
a2ccfc4
refactor: Use stopImmediatePropagation also for supressing other events
priyanshu92 Aug 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions src/tag/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ class Tag extends PureComponent {
onDelete: PropTypes.func
}

handleClick = () => {
handleClick = e => {
const { id, onDelete } = this.props

e.stopPropagation()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't remember why but I think we also need to add e.stopImmediatePropagation() too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. We can use stopImmediatePropagation() because it implicitly calls stopPropagation(). I'll update the code.

e.nativeEvent.stopImmediatePropagation()
onDelete(id)
}

Expand Down
22 changes: 20 additions & 2 deletions src/tag/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,33 @@ import toJson from 'enzyme-to-json'

import Tag from './index'

const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } }

test('renders label when passed in', t => {
const wrapper = toJson(shallow(<Tag label="hello" id="abc" />))
t.snapshot(wrapper)
})

test('call stopPropagation and stopImmediatePropagation when pill is closed', t => {
const onDelete = spy()
const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} />)
const event = {
type: 'click',
stopPropagation: 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')
wrapper.find('.tag-remove').simulate('click', nativeEvent)
t.true(onDelete.calledWith('abc'))
})

Expand All @@ -24,6 +42,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')
wrapper.find('.tag-remove').simulate('click', nativeEvent)
t.false(onSubmit.called)
})