Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Beamanator opened this issue Aug 23, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@Beamanator
Copy link

commented Aug 23, 2018

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

This comment has been minimized.

Copy link
Author

commented Aug 23, 2018

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

@Beamanator Beamanator closed this Aug 23, 2018

@Beamanator Beamanator reopened this Aug 23, 2018

@Beamanator

This comment has been minimized.

Copy link
Author

commented Aug 23, 2018

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

This comment has been minimized.

Copy link
Author

commented Aug 23, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Aug 24, 2018

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

@EINazare EINazare closed this Oct 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.