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
Closed

Comments

@Beamanator
Copy link

@Beamanator Beamanator 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
Copy link
Author

@Beamanator Beamanator commented Aug 23, 2018

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

Loading

@Beamanator Beamanator closed this Aug 23, 2018
@Beamanator Beamanator reopened this Aug 23, 2018
@Beamanator
Copy link
Author

@Beamanator Beamanator 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 ;)

Loading

@Beamanator
Copy link
Author

@Beamanator Beamanator 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

Loading

@einazare
Copy link
Contributor

@einazare einazare 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

Loading

@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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants