Allow cmd/ctrl-enter to submit comment forms

[helen]

It's become fairly common for comment/reply forms on the web to be submitted with cmd/ctrl-enter. Some quick examples include Twitter and GitHub, neither of which tells you as far as I've seen but rather just lets you discover it works. I think it'd be a nice enhancement for comment forms in both the admin and front end to submit this way. In particular, it would make managing and responding to comments a little smoother.

[Lindstromer]

I'll try and submit a patch for it tomorrow, the wp-admin part is solved but front end needs a little more work.

[Lindstromer]

Added support for Ctrl/Cmd+Enter to submit replies in wp-admin and frontend. + code style for the specified js-files.

[Lindstromer]

The patch is functioning in Firefox, Safari and Chrome on OS X when using Ctrl or Cmd + Enter. Needs testing on different operating systems to see that it picks upp the key kombination as expected.

The solution isn't to clean for the frontend part, where I had to workaround the fact that submit() is overwritten by the submit-button id.

An alternative would be to refactor the whole form output and give it a better id but I'm guessing that it could create issues.

[Lindstromer]

PHPStorm bugged with code style messing up files in previous diff. Also added html-file that was missed.

[DrewAPicture]

Assigning to mark the good-first-bug as "claimed".

[desrosj]

Patch needs a refresh to work with the new JavaScript file locations/build process.

[ocean90]

4.9.7 has been released, moving to next milestone.

[pento]

@adamsilverstein: Are you likely to be able to review this in time for 4.9.8 beta 1?

[adamsilverstein]

@pento apologies i've been travelling and just saw your note. I will look at this today.

[adamsilverstein]

I took a look at this yesterday and I think it needs a little more work to be ready:

• Let's attach the event listener in JavaScript instead of in the HTML of the element itself. This makes it easier to tell where the event is getting called from and is the common pattern we use across most of core.
• Switch to the keyup event instead of keydown which I think is better from a usability perspective?
• Can we find/submit the original form instead of the current approach of creating a form?

Punting to 4.9.9 while we finish up these details.

[xyfi]

I have brought the patch created by @Lindstromer up to date with the current core code. I have not yet come around to implementing @adamsilverstein 's requested changes.

[audrasjb]

Hello,

5.0.3 is going to be released in a couple of weeks.

It doesn't appear this ticket can be handled in the next couple of weeks (needs some work and review). Let's address it in 5.1 which is coming in February. Feel free to ask for changing the milestone if you think this issue can be quickly resolved.

Cheers,

Jb

[pento]

Patch needs refreshing.

[adamsilverstein]

In 41545.4.diff​:

• Refactor to add the event listener to comment-reply init, so its set on a per form basis.
• Inline comment explaining why we use a click() action on the button vs. calling submit() on the form

[adamsilverstein]

@xyfi @Lindstromer can you give 41545.4.diff​ a test?

[Lindstromer]

Replying to adamsilverstein:

@xyfi @Lindstromer can you give 41545.4.diff​ a test?

Thanks for the ping. Give me a day or two and I'll look into it.

[adamsilverstein]

Thanks @Lindstromer! Note if you haven't tested a patch recently: you now need to build the javascript (try npm install && grunt build) and run WordPress from the build folder (possible this requirement may have changed) - see ​https://make.wordpress.org/core/2018/05/16/preparing-wordpress-for-a-javascript-future-part-1-build-step-and-folder-reorganization/ for the original post explaining the change.

[desrosj]

@Lindstromer have you been able to test 41545.4.diff​?

I am going to punt this to 5.3 since this still needs feedback. @adamsilverstein if you feel confident in this for 5.2, feel free to move it back.

[Lindstromer]

Replying to desrosj:

@Lindstromer have you been able to test 41545.4.diff​?

I am going to punt this to 5.3 since this still needs feedback. @adamsilverstein if you feel confident in this for 5.2, feel free to move it back.

Hi @desrosj , I'm sorry I haven't had time to work with this at all. I'll give it a try soon.

[splitti]

I tested the patch and noticed that the e.metaKey is not set for Cmd in the keyup events, but keydown works. Even though this might fire more than once, the click event should be processed first and that will submit the form. I don't think switching to keydown is a problem, but will enable Cmd for submitting as is desired in this ticket.

If we want to just enable Ctrl + Enter then I'd be happy to rescind my updated diff and I'd say we're ready to land this patch.

[splitti]

Updated patch to enable CMD+enter as well

[adamsilverstein]

One issue I noticed with 41545.5.diff​ is that if i hold ctrl and double tap the enter key, the form is submitted twice and I see the 'duplicate entry' error Comment Submission Failure 2019-06-22 17-27-06.jpg​.

[adamsilverstein]

In 41545.6.diff​:

• remove the event handler when submitting form to avoid duplicate submissions

[adamsilverstein]

In 45790:

Comments: enable typing cmd/ctrl-enter to submit comment forms.

Add a key handler on the comment form that detects the cmd/ctrl-enter key press and submits the comment form.

Props xyfi, Lindstromer, helen, splitti.
Fixes #41545.

[SergeyBiryukov]

In 45792:

Coding Standards: Fix JSHint error in [45790].

See #41545.

[SergeyBiryukov]

In 46700:

Comments: Check if comment form element exists before adding a key handler to detect the cmd/ctrl-enter key press.

Follow-up to [45790].

Props raamdev.
Fixes #48543. See #41545.

[whyisjake]

In 46706:

Comments: Check if comment form element exists before adding a key handler to detect the cmd/ctrl-enter key press.

Brings [46700] to the 5.3 branch.

Follow-up to [45790].
Props raamdev.
Fixes #48543. See #41545.