Custom Dropdown menuOnClick now working

[vepak]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ yes] I am running the latest version
• [yes ] I checked the documentation and found no answer
• [yes ] I checked to make sure that this issue has not already been filed
• [yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When Value is changed on dropdown menuOnClick method is not firing

Current Behavior

What is the current behavior?

Steps to Reproduce

<CustomDropdown
id="purpose"
name="purpose"
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
menuOnClick={handlePurposeChange}
buttonProps={{
color: "info",
fullWidth: true
}}
dropdownList={Purposes}
/>

handlePurposeChange is passed as props

handlePurposeChange = (event, index) => {
console.log(index)
this.setState({
selectedPurposeIndex: index,
dropPurpose: Purposes[index]
})
};

[einazare]

Hello @vepak ,

Thank you for your interest in working with our product.
Have you tried passing the function like so:

onClick: {this.handleClick}

Also, could you tell me where did you find the menuOnClick prop?

Best,
Manu

[vepak]

I tried onClick as well, it didn't work.

<CustomDropdown
id="purpose"
name="purpose"
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
buttonProps={{
color: "info",
fullWidth: true,
onClick:handlePurposeChangeNew
}}
dropdownList={Purposes}
/>

Regarding menuOnClick, with V1 of material-kit-react, onClick didn't work so I tried menuOnClick and it worked for me. I've been using it ever since and when I upgraded to V2, it started breaking.

It's an accidental discovery :)

[einazare]

Hello again @vepak ,

Can you try this code:

<CustomDropdown
id="purpose"
name="purpose"
onClick={this.props.handlePurposeChangeNew}
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
buttonProps={{
color: "info",
fullWidth: true
}}
dropdownList={Purposes}
/>

Or this one:

<CustomDropdown
id="purpose"
name="purpose"
onClick={this.handlePurposeChangeNew}
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
buttonProps={{
color: "info",
fullWidth: true
}}
dropdownList={Purposes}
/>

Best,
Manu

[vepak]

Hi Manu,

Thank you for your time. I tried all the possible ways with onClick. But nothing worked. Could you please kindly try to use CustomDropdown and see if it's working for you.

As in the examples and documentation, there is no clear example of how to use onClick and nothing seem to work in the following as well if there is a change in value for drop down

https://demos.creative-tim.com/material-dashboard-react/#/documentation/dropdown

Once again really appreciate your time.

Thanks,
Vamsi.

[einazare]

Hello again @vepak ,

Sorry for not looking a bit more into this problem.
I've seen that on the last update that was made, for some reason the code did not save on the CustomDropdown, and the onClick prop does not work properly.
So first of all, you need to go inside src/components/CustomDropdown/CustomDropdown.jsx and change

• onClick={this.handleClose} from line 136 with onClick={() => this.handleClose(dropdownHeader)}
• onClick={this.handleClose} from line 147 with onClick={() => this.handleClose("divider)}
• onClick={this.handleClose} from line 136 with onClick={() => this.handleClose(prop)}

And after that, for example you will need the following code to access them:

<CustomDropdown
          dropup
          dropdownHeader="Dropdown header"
          buttonText="Dropup"
          onClick={(menuItem) => console.log(menuItem)}
          buttonProps={{
            round: true,
            color: "info"
          }}
          dropdownList={[
            "Action",
            "Another action",
            "Something else here",
            { divider: true },
            "Separated link",
            { divider: true },
            "One more separated link"
          ]}
        />

I hope this information helps you, and once again, sorry for not looking more into this, I was convinced that the issue was solved in the last update.

Best,
Manu

[vepak]

Thank you, Manu. It worked

I think the line numbers should be?

• onClick={this.handleClose} from line 136 with onClick={() => this.handleClose(dropdownHeader)}
• onClick={this.handleClose} from line 147 with onClick={() => this.handleClose("divider")}
• onClick={this.handleClose} from line 155 with onClick={() => this.handleClose(prop)}

-Vamsi.