Comment textarea focus on init

3 files changed, 10 insertions, 3 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 792053614..365fc8f6c 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -1,6 +1,6 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   <div class="form-group">
-    <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }">
+    <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" #textarea>
     </textarea>
     <div *ngIf="formErrors.text" class="form-error">
       {{ formErrors.text }}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index d05232202..a6525987e 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs/Observable'
@@ -17,6 +17,7 @@ import { VideoCommentService } from './video-comment.service'
 export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @Input() video: Video
   @Input() parentComment: VideoComment
+  @Input() focusOnInit = false
 
   @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
 
@@ -28,6 +29,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     'text': VIDEO_COMMENT_TEXT.MESSAGES
   }
 
+  @ViewChild('textarea') private textareaElement: ElementRef
+
   constructor (
     private formBuilder: FormBuilder,
     private notificationsService: NotificationsService,
@@ -46,6 +49,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm()
+
+    if (this.focusOnInit === true) {
+      this.textareaElement.nativeElement.focus()
+    }
   }
 
   formValidated () {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index 9608a1033..ffaf722cd 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -10,7 +10,7 @@
   </div>
 
   <my-video-comment-add
-    *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" [video]="video" [parentComment]="comment"
+    *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" [video]="video" [parentComment]="comment" [focusOnInit]="true"
     (commentCreated)="onCommentReplyCreated($event)"
   ></my-video-comment-add>