fix: Do not toggle dropwdown on pill removal (#141) 🐛

fix: Do not toggle dropwdown on pill removal

Author: priyanshu92

docs/bundle.js

@@ -13,9 +13,10 @@ class Tag extends PureComponent {
     onDelete: PropTypes.func
   }
 
-  handleClick = () => {
+  handleClick = e => {
     const { id, onDelete } = this.props
-
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
     onDelete(id)
   }
 

src/tag/index.js

@@ -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'))
 })
 
@@ -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)
 })