[wp-trac] [WordPress Trac] #61919: Ctrl + Enter with focus on "Edit your profile" within the comment form tries to submit form

[WordPress Trac]

#61919: Ctrl + Enter with focus on "Edit your profile" within the comment form
tries to submit form
---------------------------+----------------------------------------
 Reporter:  greentreefrog  |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Future Release
Component:  Comments       |     Version:  5.3
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  accessibility, javascript
---------------------------+----------------------------------------
Changes (by sabernhardt):

 * version:  6.6.1 => 5.3
 * milestone:  Awaiting Review => Future Release


Old description:

> This also happens on the "Log out?" link in the comment form.
>
> To reproduce:
> 1. Log into a WordPress site (so you will be able to see the link in
> question).
> 2. Open a post that allows comments.
> 3. Tab to the "Edit your profile" link. Technically, this link is inside
> the comment form. (A user should not be expected to know this.)
> 4. Hold down the Ctrl key and click the Enter key.
>
> As a user, I would expect the profile page to open in a new tab. That is
> not what happens. Instead, WordPress tries to submit the form and does
> not open a new tab. If there is no text in the Comment field, WordPress
> shows this error page:
>
> {{{
> Error: Please type your comment text.
>
> « Back
> }}}
>
> If there is already text in the comment field, WordPress simply submits
> the comment. I do not get taken to the profile page.
>
> I have tried this with the Jace, Twenty Twenty-Four and Twenty Twenty-
> three themes. I have tried it on 4 different sites. On one site I
> disabled all plugins and tried again. I always had this same result.
>
> This probably relates to the following isuue, where a key handler was
> added to trap Ctrl + Enter in the Comment form:
>
> [Changeset 45790](https://core.trac.wordpress.org/changeset/45790)
>
> One solution might be to move these links outside the form.
>
> Alternatively, ChatGPT suggests I could use the following JavaScript
> code; I include it in case it helps someone fix it quicker. Of course,
> modify it to fit the context:
>

> {{{
> document.addEventListener('keydown', function(event) {
>     if (event.ctrlKey && event.key === 'Enter') {
>         event.preventDefault();
>         let activeElement = document.activeElement;
>         if (activeElement.tagName.toLowerCase() === 'a') {
>             window.open(activeElement.href, '_blank');
>         }
>     }
> });
>
> }}}
>
> Thanks for looking into this!
>
> Margaret

New description:

 This also happens on the "Log out?" link in the comment form.

 To reproduce:
 1. Log into a WordPress site (so you will be able to see the link in
 question).
 2. Open a post that allows comments.
 3. Tab to the "Edit your profile" link. Technically, this link is inside
 the comment form. (A user should not be expected to know this.)
 4. Hold down the Ctrl key and click the Enter key.

 As a user, I would expect the profile page to open in a new tab. That is
 not what happens. Instead, WordPress tries to submit the form and does not
 open a new tab. If there is no text in the Comment field, WordPress shows
 this error page:

 {{{
 Error: Please type your comment text.

 « Back
 }}}

 If there is already text in the comment field, WordPress simply submits
 the comment. I do not get taken to the profile page.

 I have tried this with the Jace, Twenty Twenty-Four and Twenty Twenty-
 three themes. I have tried it on 4 different sites. On one site I disabled
 all plugins and tried again. I always had this same result.

 This probably relates to the following issue, where a key handler was
 added to trap Ctrl + Enter in the Comment form: [45790]

 One solution might be to move these links outside the form.

 Alternatively, ChatGPT suggests I could use the following JavaScript code;
 I include it in case it helps someone fix it quicker. Of course, modify it
 to fit the context:


 {{{
 document.addEventListener('keydown', function(event) {
     if (event.ctrlKey && event.key === 'Enter') {
         event.preventDefault();
         let activeElement = document.activeElement;
         if (activeElement.tagName.toLowerCase() === 'a') {
             window.open(activeElement.href, '_blank');
         }
     }
 });

 }}}

 Thanks for looking into this!

 Margaret

--

Comment:

 Hi and thanks for the report!

 I can confirm that the issue occurs with WordPress 5.3 but not 5.2, which
 makes [45790] the likely cause.

 With a quick test, I was able to adjust the conditional statement to skip
 the submit feature if the active element is a link:
 {{{
                         if (
                                 ( e.metaKey || e.ctrlKey ) &&
                                 e.keyCode === 13 &&
 document.activeElement.tagName.toLowerCase() !== 'a'
                         ) {
 }}}

 Someone else may know a better way to write that, too.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61919#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform