Confirming context menu entries via Enter when entering comments triggers comment to be posted

Question

related: Pressing Enter in comment box unexpectedly submits form

While I'm not basically against this feature, it is annoying to press Enter from the context-menu (e.g. when verifying my spelling via FF, or pasting older clipboard entries via ClipX) and realize that not only the effect I wanted (spelling correct, older entry pasted) occurs, but also my unfinished comment is posted.

(Please say this is not status-bydesign)

Answer 1

It appears that the cause of this bug is the same as for Pressing <Enter> in an input method editor should not submit comments, which affects IME users on various browsers, not just Firefox.

In both cases, the problem is that the event handler that the Stack Exchange UI uses to trigger comment form submission via the enter key is, for some peculiar reason, set to trigger on the keyup event rather than, as one would expect, on the keydown event.

The problem here is that, if pressing enter causes focus to transfer from some other UI element (such as a context menu) to the comment entry textarea, then the keyup event will be dispatched to the textarea, rather than to whatever element previously had the focus (which might not even exist anymore). This is, in fact, correct behavior according to the W3C DOM events specification:

"Note: The event target might change between different key events. For example, a keydown event for the 'Tab' key will likely have a different event target than the keyup event on the same keystroke."

(Actually, I recall seeing a much more explicit note about this behavior somewhere, but I can't track it down right now.)

Anyway, the right way to fix this is simply to attach the handler to the keydown event instead. If that event fires on the textarea, we can be sure that the user actually did press the key while the focus was in the textarea.

---

In fact, while waiting for a proper fix from the SE devs, I've implemented a fix for this issue in the Stack Overflow Unofficial Patch using the following code:

StackExchange.helpers.submitFormOnEnterPress = function ($form) {
    var $txt = $form.find('textarea');
    $txt.keydown(function (event) {
        if (event.which === 13 && !event.shiftKey && !$txt.prev("#tabcomplete > li:visible").length) {
            $form.submit();
        }
    }).keypress(function (event) {
        // disable hitting enter to produce a newline, but allow <shift> + <enter>
        return event.which !== 13 || event.shiftKey;
    });
};

This overrides the built-in SE code to enable submit-on-enter behavior in the comment editor, replacing it with a modified version that reacts to keydown events instead of keyup events. As far as I can tell, this fixes the issue described above, and also allows IMEs to work properly without requiring any composition event tricks.

Answer 2

For whatever reason, Firefox doesn't block the chrome-initiated keyup event from being propagated after it returns focus to the document. My guess would be that it acts on the keypress event, switches back to the document context, and never kills the event chain in the process. I personally believe that it's buggy behaviour and should probably be reported to the Firefox developers as such.

However, it seems to be only the keyup event (at least in Firefox) that gets sent, so it's possibly to work around that issue by reassigning the comment submit handler from keyup to keydown. This seems to prevent the accidental submissions while maintaining the desired functionality without breaking anything else.

I've quickly mocked this swap up in this userscript for the purposes of demonstration. If anyone would like to independently verify that making the change fixes the problem and doesn't seem to cause issues elsewhere, feel free. I'm not sure whether or not it would fix the problem in IE7, but if I remember correctly from trying to replicate this in various browsers, it's already a non-issue in IE8.

Answer 3

I concur with Tim. This is a bug in Firefox, not us.

Doesn't happen in: Safari, Chrome, Opera, IE.