Dropdown item onClick not firing when clicked

[jonathanwmaddison]

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!

[jossmac]

@jonathanwmaddison thanks for raising the issue. Is it related to #191?

[clschnei]

Can you paste a snippet of your component usage/implementation? This sounds like a props mix-up to me.

[jonathanwmaddison]

@jossmac I don't think so. I think this is related to either how I'm passing in the props or an issue with how the prop is being bound to the onClick event in the Dropdown component.

@clschnei Here you go:

    const downloadDropdown =[{
        title: 'download-resume',
        class: 'dropdown',
        text: 'Word .doc',
        value: ()=> this.toggleResumeModal(),
        label: ['Microsoft Word']
      },
      {
        title: 'download-html',
        class: 'dropdown',
        text: 'HTML Resume',
        value: ()=>downloadInnerHtml('resume.html','resume-container','text/html'),
        label: ['HTML']
      },
      {
        title: 'download-json',
        class: 'dropdown',
        label: ['JSON'],
        value: ()=>saveJson(this.props.user),
      }] .... // Then in my render function I render the Dropdown component like this: 
      <Dropdown 
        key='dropdown' 
        buttonType='hollow-primary' 
        buttonLabel={['Download  ',<Glyph icon='desktop-download' />]} 
        items={downloadDropdown}
 />

Thank you!

[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.