Site Settings: Add stopPropagation to SELECT onClick events

[artpi]

What?

While nested in LABEL, SELECT onClick event was propagating
onClick was propagating to label, triggering click events higher
in DOM tree in Safari. Fixes #86

Problem

(Copied from #86 )

My Sites > Settings > Discussion

Click on a select element, and it toggles the checkbox. Looks like it only affects Safari, not Chrome or Firefox. IE untested.

Testing

1. Open Safari
2. Go to My Sites > Settings > Discussion
3. Change nested comments dopth
4. Notice that toggle doesent switch

[omarjackman]

@artpi I think the intent here is to stop the click event from bubbling up to the label as you noted so we only need stopPropagation. Using preventDefault here might mislead some one into thinking we want to prevent the default action of the select element.

[artpi]

@omarjackman : TLDR: stopPropagation doesent work.
I have tried that before, but I dont know what happens on Safari that even when I stop propagation, it still goes up the DOM tree.
This is the only solution that works. Maybe some problem with React synthetic events...

[gwwar]

@artpi I've confirmed that stopPropagation doesn't work here, and stopImmediatePropagation is unavailable on a synthetic event. Since we're adding this to work around a browser bug could you add a comment to recordClickEventAndStop and reference this issue?

You're good to 🚢 once that's done.

[omarjackman]

@artpi I ran into a similar issue and found this answer on StackOverflow which makes sense of whats going on here. Cant stop propagation because it has already propagated by the time your handler is invoked. Just stating the obvious that preventDefault seems to be the best option here.