-
Notifications
You must be signed in to change notification settings - Fork 47.6k
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
onClick firing for disabled buttons in v16 #11588
Comments
I may be missing something, but i feel like this is expected behavior and can easily be fixed by tweaking your code. |
Does this happen with regular DOM listeners? |
@gaearon looks like it https://jsfiddle.net/b4wycvwf/1/ and then if the onclick is attached to the disabled button the event isn't triggered. |
Sounds like expected behavior then. |
FWIW, checked on Firefox, Chrome, and Safari. The onclick only triggers on Chrome and Safari. Didn't check IE. |
Thanks guys, Yep i though it was a React problem like on #8308 But it's a normal html DOM behavior... I share a simple solution to hack this behavior on my project: const buttonElement = (
<button
disabled={disabled}
download={download}
type={type}
className={classes}
onClick={onClick}
onMouseOver={onMouseOver}
tabIndex={tabIndex}
>
{children}
</button>
)
if (disabled) {
return (
<span
onClick={e => {
e.preventDefault()
e.nativeEvent.stopImmediatePropagation() // Prevent click bubbling
e.stopPropagation()
}}
title={title}
>
{buttonElement}
</span>
)
}
return buttonElement |
I don't think it is expected behavior https://jsfiddle.net/b4wycvwf/1/. The fiddle shown(using DOM events) does not trigger when you click on the icon within the disabled button, this being different from @ClemDelp 's observed behavior. |
@thysultan are you by any chance checking on Firefox? Because if you check that same fiddle on Chrome or Safari you will see the event being triggered. So although it may not be correct, it's not a React issue. |
@rstims I observed the fiddle on Chrome 62.0.3202.94, OSX 10.12. Only safari emits the event on my device. Edit: I'm unsure if there's a spec that defines what is the correct behavior for this. |
Browsers are notoriously inconsistent on this. Generally disabled elements emit no events, but they "probably" should only prevent the event on the direct target, I think the spec is a bit unclear on it, or maybe its just legacy behavior. In any case I am pretty dang certain this is a browser difference not a React bug (could be wrong). I am seeing the click on the icon fire on Chrome 62.0.3202.94 and Mac 10.12 by the way @thysultan |
With all extensions disabled(just in case, b/c inline events) this is what i get on all the browsers i have.
|
i definitely getting the alert popping up for Chrome so i'm not sure where the difference in observed behavior is in https://jsfiddle.net/b4wycvwf/1/ |
Replacing "click" with So on my machine Chrome and Firefox have different behavior on Not sure what could be causing the difference between me, @jquense and @rstims 's Chrome observations. Tried using |
in either case tho, I don't see much evidence that this is React related. It seems to be solely differences in how browsers treat disabled elements and mouse events yeah? |
Yes that is more likely. If @ClemDelp also observed the same differences(in Firefox) with the example in the original post, then that is probably the case. |
I confirm that it's not a React issue but really how browsers treat disabled element. I only have the problem on chrome & safari |
Hello the React Team! I found a little event firing bug
When I click on an Icon element inside a disabled button, the onClick on the div element is triggered
The text was updated successfully, but these errors were encountered: