Repository: Semantic-Org/Semantic-UI-React (JavaScript)

Issue:
Dropdown Item's onClick doesn't trigger Dropdown's selection
## Bug Report

### Steps
Creating an Item (option) with an onClick property doesn't trigger the onChange event of the Dropdown when the Item is clicked.

### Expected Result
The onClick should run and then the event should propagate to the parent to execute the onChange event

### Actual Result
Only the Item's onClick executes, the Dropdown's onChange does not execute.

### Version
2.0.3

### Testcase
"Aland Islands" Item of the Dropdown has an onClick property, when the Item is selected it executes the onClick; but doesn't set it as the Dropdowns value.

The other Items without an onClick allow the Item to be selected and close the menu.

https://codesandbox.io/s/semantic-ui-example-forked-clt0r?file=/example.js


Discussion:
This definitely a bug, fix is coming 🚀



Patch:
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 783cffebf1..501e81b43d 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -975,15 +975,25 @@ export default class Dropdown extends Component {
       : (optValue) => optValue === value
 
     return _.map(options, (opt, i) =>
-      DropdownItem.create({
-        active: isActive(opt.value),
-        onClick: this.handleItemClick,
-        selected: selectedIndex === i,
-        ...opt,
-        key: getKeyOrValue(opt.key, opt.value),
-        // Needed for handling click events on disabled items
-        style: { ...opt.style, pointerEvents: 'all' },
-      }),
+      DropdownItem.create(
+        {
+          active: isActive(opt.value),
+          selected: selectedIndex === i,
+          ...opt,
+          key: getKeyOrValue(opt.key, opt.value),
+          // Needed for handling click events on disabled items
+          style: { ...opt.style, pointerEvents: 'all' },
+        },
+        {
+          generateKey: false,
+          overrideProps: (predefinedProps) => ({
+            onClick: (e, item) => {
+              predefinedProps.onClick?.(e, item)
+              this.handleItemClick(e, item)
+            },
+          }),
+        },
+      ),
     )
   }
 


Test patch:
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index e49d0236df..7d2b61cbbd 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -2037,6 +2037,28 @@ describe('Dropdown', () => {
       items.at(1).key().should.equal('bar')
       items.at(2).key().should.equal('baz')
     })
+
+    it('invokes "onClick" on item and handles', () => {
+      const onItemClick = sandbox.spy()
+      const customOptions = [
+        { key: 'foo', text: 'foo', value: 'foo' },
+        { key: 'bar', text: 'bar', value: 'bar', onClick: onItemClick },
+      ]
+
+      wrapperMount(<Dropdown options={customOptions} />)
+      dropdownMenuIsClosed()
+
+      wrapper.simulate('click')
+      wrapper.simulate('focus')
+      dropdownMenuIsOpen()
+
+      wrapper.find('.item').at(1).simulate('click')
+      dropdownMenuIsClosed()
+      wrapper.find('.item').at(1).should.have.className('selected')
+
+      onItemClick.should.have.been.calledOnce()
+      onItemClick.should.have.been.calledWithMatch({ type: 'click' }, { value: 'bar' })
+    })
   })
 
   describe('search', () => {