Recommend allowing dropdown to close after button clicked & dropdown is open

[Beamanator]

material-kit-react/src/components/CustomDropdown/CustomDropdown.jsx

Line 33 in fbcd45c

this.setState({ open: true });

I implemented this by making a new variable in the state called buttonToggle, defaulting it to false in the constructor, then changing it in handleClick like this:

handleClick = () => {
    const buttonToggle = !this.state.buttonToggle;
    this.setState({ buttonToggle: buttonToggle, open: buttonToggle });
}

Even when I tried just doing this.setState({ open: !this.state.open }), the handleClose method was being called before the handleClick method, so just flipping the open state variable wasn't enough.

[Beamanator]

Not 100% working actually... Working on it...

[Beamanator]

My old solution didn't work b/c you would sometimes have to click the dropdown button twice to get it to open. New solution in the next comment ;)

[Beamanator]

The next idea I had (which I'm going to stick with for now) is to add a unique id to the button in the CustomDropdown, then in the handleClose function, check if the target's id is the same as the button. If they're the same, don't let handleClose close the dropdown, instead let handleClick close it by toggling this.state.open. Check it out:

state = {
    customId: ~~(Math.random()*10000) + 1,
    open: false
}

handleClick = () => {
    this.setState({ open: !this.state.open });
}
handleClose = ({ target }) => {
    // if you clicked on the span element inside the button, move target
    // -> up a level to the button so we can access its 'id'
    if (target.nodeName === "SPAN") {
        target = target.parentElement
    }

    // if target's id does NOT match this component's id, close the dropdown.
    if (+target.id !== this.state.customId) {
        this.setState({ open: false });
    }
    // else -> button will be closed by handleClick function
    // else {}
}

Note: I also added id={this.state.customId} to the <Button> component in this file

[einazare]

Hello @Beamanator ,

And thank you for your interest in using our product.
Thank you for showing us this.
We are going to revise it on our next update.

Best,
Manu