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

click allowed on button text when state="disabled" if controlled #92

Closed
capi1O opened this issue Apr 20, 2019 · 3 comments · Fixed by #93
Closed

click allowed on button text when state="disabled" if controlled #92

capi1O opened this issue Apr 20, 2019 · 3 comments · Fixed by #93
Labels

Comments

@capi1O
Copy link

capi1O commented Apr 20, 2019

First thank you for this great component that I use in many projects.

In the current project I work on this button is used in a form.

I control this button mainly via methods (using <ProgressButton> ref) like success() or error().
However I am also using the state prop which I set to "disabled" until all the form fields are valid, therefore I set the controlled prop to true.

When I do this, when the button is in disabled state the click on the inside of <ProgressButton> (underlying span element ("Go !" text)) goes through, even if the cursor correctly shows disabled icon. Clicks within button but outside "Go !" text are correctly blocked.

If I unset the controlled prop all the clicks are correctly blocked in disabled state.

I can provide an example in codesandbox if you want.

edit : I edited the issue as it seems only the click on underlying span element ("Go !" text) goes through (no click event received if clicking left or right part of the button), but I will try to reproduce an example on codesandbox because that might be a CSS issue on my side as I tweaked the pointer-events property in the form, will check that.

@capi1O capi1O changed the title intial click allowed when state="disabled" if controlled click allowed on button text when state="disabled" if controlled Apr 20, 2019
@capi1O
Copy link
Author

capi1O commented Apr 20, 2019

So it is not an issue with my CSS, it is reproduced here : https://codesandbox.io/s/521v1myvll

And here is a quick fix :

.pb-container.disabled > button.pb-button > span {
  pointer-events: none;
}

that you can see here https://codesandbox.io/s/x44059jxz

@mathieudutour
Copy link
Owner

Happy to accept a PR!

@capi1O
Copy link
Author

capi1O commented Apr 24, 2019

Alright I will do it this week-end ! In the meantime could you accept PR #91 (so it is easier on my side because I can start straight away from my last branch) ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants