Comment textarea doesn't get focus on loading when replying using Firefox and Edge

[Jun Omae]

We expect comment textarea gets focus when visiting https://trac.edgewall.org/demo-1.0/ticket/1?replyto=description#comment, however it doesn't work using Firefox and Edge. It works fine using Chrome.

[Jun Omae]

Work around is to focus it when the given element in the hash is input element:

trac/templates/layout.html

@@ -57 +57 @@
           return false;
         });
         </py:if>
-        $(".trac-autofocus").focus();
+        var autofocus = location.hash;
+        autofocus = autofocus ? document.getElementById(autofocus.substring(1))
+                              : null;
+        if (autofocus !== null) {
+          autofocus = $(autofocus);
+          if (!autofocus.is(':input'))
+            autofocus = null;
+        }
+        if (autofocus === null)
+          autofocus = $(".trac-autofocus");
+        autofocus.focus();
         $(".trac-target-new").attr("target", "_blank");
         setTimeout(function() { $(".trac-scroll").scrollToTop() }, 1);
         $(".trac-disable-on-submit").disableOnSubmit();

[Jun Omae]

In 1.2-stable, comment textarea gets focus when replying. trac-autofocus is used in class attribute of comment textare after [14393] (#11835 but not described).

Backport:

trac/ticket/templates/ticket.html

@@ -205 +205 @@
                 <a tabindex="42" href="${href.wiki('WikiFormatting')}">WikiFormatting</a>
                 here.
               </label>
-              <textarea id="comment" name="comment" class="wikitext trac-fullwidth trac-resizable" rows="10" cols="78">
+              <textarea id="comment" name="comment" class="${classes('wikitext', 'trac-fullwidth', 'trac-resizable', 'trac-autofocus' if replyto else None)}" rows="10" cols="78">
 ${comment}</textarea>
             </fieldset>
           </div>

[Ryan J Ollos]

Confirmed reply-to autofocus works on 1.2-stable and for 1.0-stable with Chrome, but not 1.0-stable with Firefox 77. I tried both comment:1 and comment:2 patches, but they don't seem to fix the issue. Do the patches still fix the issue for you?

[Jun Omae]

I noticed comment editor has the same issue but the issue also has been fixed in 1.2-stable.

trac/ticket/templates/ticket.html

@@ -205 +205 @@
                 <a tabindex="42" href="${href.wiki('WikiFormatting')}">WikiFormatting</a>
                 here.
               </label>
-              <textarea id="comment" name="comment" class="wikitext trac-fullwidth trac-resizable" rows="10" cols="78">
+              <textarea id="comment" name="comment" class="${classes('wikitext', 'trac-fullwidth', 'trac-resizable', 'trac-autofocus' if replyto else None)}" rows="10" cols="78">
 ${comment}</textarea>
             </fieldset>
           </div>

trac/ticket/templates/ticket_change.html

@@ -116 +116 @@
   <form py:if="show_editor" id="trac-comment-editor" method="post"
         action="${href.ticket(ticket.id) + '#comment:%d' % cnum}">
     <div>
-      <textarea name="edited_comment" class="wikitext trac-fullwidth trac-resizable" rows="10" cols="78">
+      <textarea name="edited_comment" class="wikitext trac-fullwidth trac-resizable trac-autofocus" rows="10" cols="78">
 ${edited_comment if edited_comment is not None else change.comment}</textarea>
       <input type="hidden" name="cnum_edit" value="${cnum}"/>
     </div>

The patch would fix the issue on both reply and edit with Firefox in my environment but the issue on edit with Chrome is not fixed.

Hmm, I think it seems focusing by anchor (e.g. #comment, #comment:N) and trac-autofocus are conflicting. By the conflicting, textarea may not be focused.

[Jun Omae]

Additional changes would make fine on both Firefox and Chrome but edit doesn't focus textarea for edit-comment on Edge. I cannot find perfect solution. Re-targeting to next-stable-1.4. That is a minor issue….

trac/templates/layout.html

@@ -57 +57 @@
           return false;
         });
         </py:if>
-        $(".trac-autofocus").focus();
+        var autofocus = $(".trac-autofocus");
+        if (autofocus.length !== 0) {
+          if (location.hash)
+            setTimeout(function() { autofocus.focus() }, 1);
+          else
+            autofocus.focus();
+        }
         $(".trac-target-new").attr("target", "_blank");
         setTimeout(function() { $(".trac-scroll").scrollToTop() }, 1);
         $(".trac-disable-on-submit").disableOnSubmit();

[Ryan J Ollos]

Milestone renamed