Comments: Fixed tab focus change & button placement on form usage

Fixes issue of tabs jumping back to active comments when stopping a
reply to an archived comment.
Fixes button placement looking odd due to wrong location and differing
styles depending on interaction path.

Author: ssddanbrown

resources/js/components/page-comments.ts

@@ -16,6 +16,7 @@ export class PageComments extends Component {
     private archivedTab!: HTMLElement;
     private addButtonContainer!: HTMLElement;
     private archiveContainer!: HTMLElement;
+    private activeContainer!: HTMLElement;
     private replyToRow!: HTMLElement;
     private referenceRow!: HTMLElement;
     private formContainer!: HTMLElement;
@@ -48,6 +49,7 @@ export class PageComments extends Component {
         this.archivedTab = this.$refs.archivedTab;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.archiveContainer = this.$refs.archiveContainer;
+        this.activeContainer = this.$refs.activeContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.referenceRow = this.$refs.referenceRow;
         this.formContainer = this.$refs.formContainer;
@@ -76,8 +78,10 @@ export class PageComments extends Component {
 
     protected setupListeners(): void {
         this.elem.addEventListener('page-comment-delete', () => {
-            setTimeout(() => this.updateCount(), 1);
-            this.hideForm();
+            setTimeout(() => {
+                this.updateCount();
+                this.hideForm();
+            }, 1);
         });
 
         this.elem.addEventListener('page-comment-reply', ((event: CustomEvent<PageCommentReplyEventData>) => {
@@ -154,8 +158,10 @@ export class PageComments extends Component {
     protected resetForm(): void {
         this.removeEditor();
         this.formInput.value = '';
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
         this.setContentReference('');
-        this.removeReplyTo();
     }
 
     protected showForm(): void {
@@ -165,9 +171,9 @@ export class PageComments extends Component {
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         this.loadEditor();
 
-        // Ensure the active comments tab is displaying
+        // Ensure the active comments tab is displaying if that's where we're showing the form
         const tabs = window.$components.firstOnElement(this.elem, 'tabs');
-        if (tabs instanceof Tabs) {
+        if (tabs instanceof Tabs && this.formContainer.closest('#comment-tab-panel-active')) {
             tabs.show('comment-tab-panel-active');
         }
     }
@@ -176,7 +182,7 @@ export class PageComments extends Component {
         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getActiveThreadCount() > 0) {
-            this.elem.append(this.addButtonContainer);
+            this.activeContainer.append(this.addButtonContainer);
         } else {
             this.commentCountBar.append(this.addButtonContainer);
         }
@@ -239,7 +245,8 @@ export class PageComments extends Component {
     }
 
     public startNewComment(contentReference: string): void {
-        this.removeReplyTo();
+        this.resetForm();
+        this.showForm();
         this.setContentReference(contentReference);
     }
 

resources/views/comments/comments.blade.php

@@ -24,15 +24,16 @@ class="comments-list tab-container"
                     aria-selected="false">{{ trans_choice('entities.comment_archived_count', count($commentTree->getArchived())) }}</button>
         </div>
         @if ($commentTree->empty() && userCan('comment-create-all'))
-            <div class="ml-m" refs="page-comments@add-button-container">
+            <div refs="page-comments@add-button-container" class="ml-m flex-container-row" >
                 <button type="button"
                         refs="page-comments@add-comment-button"
-                        class="button outline mb-m">{{ trans('entities.comment_add') }}</button>
+                        class="button outline mb-m ml-auto">{{ trans('entities.comment_add') }}</button>
             </div>
         @endif
     </div>
 
     <div id="comment-tab-panel-active"
+         refs="page-comments@active-container"
          tabindex="0"
          role="tabpanel"
          aria-labelledby="comment-tab-active"
@@ -48,10 +49,10 @@ class="comment-container no-outline">
         @if(userCan('comment-create-all'))
             @include('comments.create')
             @if (!$commentTree->empty())
-                <div refs="page-comments@addButtonContainer" class="flex-container-row">
+                <div refs="page-comments@addButtonContainer" class="ml-m flex-container-row">
                     <button type="button"
                             refs="page-comments@add-comment-button"
-                            class="button outline ml-auto">{{ trans('entities.comment_add') }}</button>
+                            class="button outline mb-m ml-auto">{{ trans('entities.comment_add') }}</button>
                 </div>
             @endif
         @endif