Dropdown item onClick not firing when clicked

I’m passing down an array of items to a Dropdown component and for each I’m defining the value as a function. However, the onClick event doesn’t get called when I click the item. I found that if I made a small adjustment to line 105 of Dropdown Component it works:

Current implementation: { className: 'Dropdown-menu__action', onClick: self.onClick.bind(self, item.value) },

Working Implementation: { className: 'Dropdown-menu__action', onClick: item.value },

Thanks for this nice looking UI kit!

[clschnei]

This definitely not a bug. So we can probably close this ticket.

But to resolve your issue @jonathanwmaddison, you have two problems:

1. You need to add an onSelect prop to alert the parent component that a value has been selected.
2. Now you can either:
   • call the function in your parent callback handler

   handleSelect(value) { 
     value() // will map to your items array "value"
   }
   
   <Dropdown onSelect={this.handleSelect} />
   

   • OR build those functions into your parent component class and use string values to direct your logic flow

Should fix your problem.

[jonathanwmaddison]

@clschnei Thank you for the suggestions and for looking at my code so quickly. Hopefully this will help other coders with the same problem, and missed how to do this.