automatically focus when writing a new status

src/app/components/floating-column/add-new-status/add-new-status.component.html

@@ -3,10 +3,9 @@
 
     <form (ngSubmit)="onSubmit()">
         <!-- <label>Please provide your account:</label> -->
-        <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off"
+        <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title (optional)" />
-            placeholder="Title (optional)" />
         <!-- <textarea rows="4" cols="50"> -->
-        <textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
+        <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
 
         <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
             <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>

src/app/components/floating-column/add-new-status/add-new-status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { AccountInfo } from '../../../states/accounts.state';
 import { MastodonService, VisibilityEnum } from '../../../services/mastodon.service';
@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 export class AddNewStatusComponent implements OnInit {
     @Input() title: string;
     @Input() status: string;
+    @ViewChild('reply') replyElement: ElementRef;
 
     selectedPrivacy = 'Public';
     privacyList: string[] = ['Public', 'Unlisted', 'Follows-only', 'DM'];
@@ -22,6 +23,9 @@ export class AddNewStatusComponent implements OnInit {
         private readonly mastodonService: MastodonService) { }
 
     ngOnInit() {
+        setTimeout(() => { 
+            this.replyElement.nativeElement.focus();
+        }, 0);
     }
 
     onSubmit(): boolean {

src/app/components/stream/status/reply-to-status/reply-to-status.component.html

@@ -1,5 +1,5 @@
 <form (ngSubmit)="onSubmit()">
-    <textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
+    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
 
     <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
         <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>

src/app/components/stream/status/reply-to-status/reply-to-status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { MastodonService, VisibilityEnum } from '../../../../services/mastodon.service';
 import { AccountInfo } from '../../../../states/accounts.state';
@@ -14,6 +14,7 @@ export class ReplyToStatusComponent implements OnInit {
     @Input() status: string = '';
     @Input() statusReplyingToWrapper: StatusWrapper;
     @Output() onClose = new EventEmitter();
+    @ViewChild('reply') replyElement: ElementRef;
 
     private statusReplyingTo: Status;
 
@@ -31,6 +32,10 @@ export class ReplyToStatusComponent implements OnInit {
         for (const mention of this.statusReplyingTo.mentions) {
             this.status += `@${mention.acct} `;
         }
+
+        setTimeout(() => { 
+            this.replyElement.nativeElement.focus();
+        }, 0);
     }
 
     onSubmit(): boolean {
@@ -53,7 +58,7 @@ export class ReplyToStatusComponent implements OnInit {
                 break;
         }
 
-        let spoiler =  this.statusReplyingTo.spoiler_text;
+        let spoiler = this.statusReplyingTo.spoiler_text;
 
         for (const acc of selectedAccounts) {
             this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler, this.statusReplyingTo.id)

src/app/components/stream/status/status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Inject, LOCALE_ID } from "@angular/core";
+import { Component, OnInit, Input, Inject, LOCALE_ID, ElementRef } from "@angular/core";
 import { Status } from "../../../services/models/mastodon.interfaces";
 import { formatDate } from '@angular/common';
 import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
@@ -45,7 +45,8 @@ export class StatusComponent implements OnInit {
     }
    
 
-    constructor(@Inject(LOCALE_ID) private locale: string) { }
+    constructor(
+        @Inject(LOCALE_ID) private locale: string) { }
 
     ngOnInit() {        
     }
@@ -70,6 +71,7 @@ export class StatusComponent implements OnInit {
 
     openReply(): boolean{
         this.replyingToStatus = !this.replyingToStatus;
+        
         return false;
     }