fix(Dropdown): handle "onClick" on options (Semantic-Org#4322)

rperniciano · Jan 19, 2022 · ba0b20e · ba0b20e
1 parent 0b62dea
commit ba0b20e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git 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)
+            },
+          }),
+        },
+      ),
     )
   }
 

diff --git 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', () => {