We Keep Coding

React onClick not firing on first click, second click behaves as expected (simple debug message doesn't appear until second click)

I introduced a bug at some point (live version doesn't have this issue) but haven't been able to figure out what caused it.
I have a button in React (it's just a div with an onClick).
The button has an onClick and a :hover CSS effect.
The button is loaded by clicking on another div (which works on the first click).
After loading the button (and its wrapper content), the button doesn't do anything on the first click. Without doing anything else, clicking again let's it work fine.
Currently I have a debug message in my onClick, so it looks something like this
onClick={(e) => {
console.log("ONclicked! " + this.props.alt);
// e.stopPropagation();
// various callbacks
}}>
I also have similar console.log debug messages on all of the button's parents, all the way up to the root React element (i.e. clicking anywhere on the page shoots out a message, except when clicking on this particular button the first time). Even the root element does not register anything on the first click..
None of these messages appear on the first click.
Again, without doing anything else, just clicking one more time in the same spot fires the onClick as expected.
Other questions about "first click not working" I've seen are all about the state not updating on the first click. In my case I'm not even trying to update the state, I don't seem to be getting the onClick called at all.
I've looked through all the commits for this version and still haven't been able to figure out the problem. Any ideas on what can cause this behavior? The weirdest part to me is that the second click works, while the first doesn't seem to do anything. But nothing about the state/DOM is changing between the first and second click (since the first click doesn't seem to be registered at all). I think this rules out things like a misconfigured pointer-events CSS rule?
Edit:
Upon further exploration, it seems that the first click actually triggers onMouseEnter, which seems totally nuts lol... But I added a console.log to onMouseEnter and it's definitely triggering exactly when I make the first click, and NOT on subsequent clicks.
Edit 2:
But this mouseEnter thing only happens in Firefox, not Chrome. But the first click not working bug is in both browsers.
Edit 3:
onMouseDown is firing properly, but onClick still only happens on the second time the button is clicked (at which point onMouseDown has fired twice).
Also, double checked and confirmed that I don't use stopPropagation anywhere which seems to be a common source of this problem.

Figured it out!
In another adjacent div, I had an onBlur handler. In that handler, I called setState() on the component (hiding another div when that div is unfocused).
To show the button that was having issues, I clicked in something in the div with the onBlur. This gave it focus. When I did a first click outside on the button that appeared, it triggered blur.
Apparently, the setState() call interfered with the click in some way, including causing the weird behavior I described with mouseEnter being retriggered. Perhaps the setState caused a redraw, which then caused mouseEnter to be fired again? Maybe the quick redraw also stops the onClick from going through, even though mouseDown is fired? (something to do with event ordering?) I'm still not sure why exactly that happens.
But after removing the setState() call, the first click on the button works as expected.
And thus ends a couple hours of painful debugging.

I had the same problem, in your onClick function you have to persist your event.
onClick={(e) => {
e.persist();
console.log("ONclicked! " + this.props.alt);
// e.stopPropagation();
// various callbacks
}}>
see this link for more explanation on the subject: https://deepscan.io/docs/rules/react-missing-event-persist

If you are using Intellij or WebStorm this happens when running javascript debug mode.

jQuery change does not trigger even when forced

I'm having difficulties with getting the .change() event in jQuery to trigger when I change the value of a select drop down. I've already searched for a possible solution though the ones I came across do not seem to work for me...
Basically I have an event on a site which is set as a variable product in WooCommerce, with different time slots. I have written a reasonably complex algorithm to detect whether the maximum number of people have taken that time slot in order to let the user know that the time and date they want is available or not. That part works, though I need to add a trigger on the time slot drop down in order to fire the check.
For debugging purposes I did this:
$('#time-slot').on('change', function() {
console.log("changed");
});
Where '#time-slot' is the ID of the select box. However, this does not seem to trigger the console.log text when I change the select. I even tried the following in my console:
$('#time-slot').trigger('change');
But the "changed" text did not appear in my console.
Then I changed my code so that it would trigger on a click instead. In my console now:
$('#time-slot').trigger('click');
And this time the text appeared in my console just fine - I even tried it with various other random events such as mouseup, mousedown and focus each time manually triggering the event and every other one worked - except change which is the one I really need.
Is change no longer supported? Or is it that I'm coding it incorrectly? The version of jQuery I am using is 1.11.3.
Hopefully there is a simple solution that maybe I'm just overlooking!
Thank you

Trigger change of a checkbox made by javascript

I'm building a jQuery plugin to style checkboxes. I hide the real one and after it insert button which when clicked toggles the hidden checkbox. But if I check the hidden checkbox via JavaScript, fake button doesn't change of course. I thought about making it to change using jQuery's .change() but it also doesn't trigger the change when made by JavaScript and not by actually clicking the checkbox.
I want plugin to be universal and to also work if someone has a button like "check all" or "uncheck all" which does the thing with JavaScript, I want my fake checkbox-buttons to change accordingly.
The question is what method should I use instead jQuery's change() in order to watch not only changes made by mouse clicks, but also by javascript for example $('checkbox').prop('checked', true);
edit2:
I realized there is no proper way to watch properties with JavaScript, except checking the property several times a second for each checkbox which is very unattractive.I decided not to include such inefficient feature to my plugin and instead leave it to user to also trigger the change if he wants to manipulate values via JavaScript.

You can't watch properties. You could set up a timer that looks for changes every few milliseconds, but that is not satisfying.
Instead, you should rely on all other code to trigger the change event, when they want plugins like yours to update (there may also be cases when they don't):
$(':checkbox').prop('checked', true).change();

You need to trigger the change event manually.
$('#checkbox').attr('checked', 'checked').change();
Have a look at this :
JsFiddle

jQuery & Chrome - Finding Button Hooks

Using Chrome's developer tools I am trying to determine what jQuery function is hooking an input button on the page for debugging purposes. I usually just keep searching until I find it, but I figured I'd ask this time.
Is there a way to find a jQuery button hook for a specific button in Chrome? I've tried looking through the Event Listener Breakpoints, but can never seem to find the right thing to pause it.
Basically, I need to know what jQuery / Javascript is being executed after the button is clicked.
The hooks are implemented in the application like so:
$('.button_class').click(function (){
$('#button_id').click(function(){
etc...

try this :
$(yourbutton).data('events');

Depending on the number of events/timers on the page this doesn't always work. But you can try "pausing" before clicking the button you want to debug in the JavaScript debug window. That way the debugger will pause on the next line that executes. The thing that occasionally prevents you from using that is if there is a "hover" or mouse move/in/out event tied on an element you have to pass over to get to the button (including the button itself). In that case I just remove those events (if I can) until I get the one I want. The event listener breakpoints would be more ideal but they're sometimes difficult when using jQuery or another library, I've actually put in a feature request to the Chrome Dev Tools team to address this very issue. (allowing you to specify what files are "yours" and only "breaking" in those specific files)
good luck -ck

Checkboxes are being checked before click handler is even called

I have the following snippets: http://jsfiddle.net/L7rne/5/ and http://jsfiddle.net/L7rne/6/
It turns out that if you pause execution of the script in the click event handler, then the checkbox is checked, even though there is event.preventDefault().
I tried this in Firefox 7 and Chrome 15 and both behave in the same way.
I'm almost sure that it's a correct behaviour but somehow I cannot find any reference why it's like that.
Could someone point me in the right direction?
EDIT:
When you start with checked checkboxes then it becomes even more interesting:
http://jsfiddle.net/L7rne/8/ - the checkbox becomes unchecked but its value stays checked
http://jsfiddle.net/L7rne/9/ - the checkbox becomes unchecked but its value becomes false
(This is consistent with pure Javascript code using checkbox.checked and checkbox.getAttribute('checked'), so I'm not pasting another jsfiddle snippets)
EDIT2:
COBOLdinosaur in one of the comments pointed me to this: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation, but IMHO that only confirms my point of view...

not sure I'm understanding the problem. why wouldn't it be the right behaviour?
seriously, let's say you write some code that shows/hides a div based on whether a checkbox is ticked or not.
so, you write an onclick. if the checkbox is unticked, and then you click it, what do you think should be done to the div? obviously, you would expect the event to find the checkbox to be checked.

By time the event handler fires, the event has already taken place, and the browser is re-rendering in response. If the handler gets suspended, then the browser completes the work because nothing prevented it.
Its like calling the police to a bank robbery, and they are in a traffic accident on the way. The robbers get away. The deed is done.