From 64cd7ad6b74b945f68e1f7b702ed83da2557be80 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 7 Jul 2024 13:53:12 -0700
Subject: [PATCH] Autofocus option inputs

---
 src-ui/messages.xlf                           |  4 +--
 .../custom-field-edit-dialog.component.html   |  2 +-
 ...custom-field-edit-dialog.component.spec.ts | 23 +++++++++++++-
 .../custom-field-edit-dialog.component.ts     | 31 +++++++++++++++++--
 4 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index ba49a05d2..2061c9c12 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -3460,14 +3460,14 @@
         <source>Create new custom field</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">80</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8751213029607178010" datatype="html">
         <source>Edit custom field</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts</context>
-          <context context-type="linenumber">57</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6672809941092516947" datatype="html">
diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
index 34936b1bb..bc893d53a 100644
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
@@ -22,7 +22,7 @@
           <div formArrayName="select_options">
             @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
               <div class="input-group input-group-sm my-2">
-                <input type="text" class="form-control" [formControl]="option" autocomplete="off">
+                <input #selectOption type="text" class="form-control" [formControl]="option" autocomplete="off">
                 <button type="button" class="btn btn-outline-danger" (click)="removeSelectOption(i)" i18n>Delete</button>
               </div>
             }
diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts
index f1de14f15..2de17577f 100644
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts
@@ -14,6 +14,8 @@ import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
+import { ElementRef, QueryList } from '@angular/core'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('CustomFieldEditDialogComponent', () => {
   let component: CustomFieldEditDialogComponent
@@ -30,7 +32,13 @@ describe('CustomFieldEditDialogComponent', () => {
         TextComponent,
         SafeHtmlPipe,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),
@@ -102,4 +110,17 @@ describe('CustomFieldEditDialogComponent', () => {
       component.objectForm.get('extra_data').get('select_options').value.length
     ).toBe(2)
   })
+
+  it('should focus on last select option input', () => {
+    const selectOptionInputs = component[
+      'selectOptionInputs'
+    ] as QueryList<ElementRef>
+    component.dialogMode = EditDialogMode.CREATE
+    component.objectForm.get('data_type').setValue(CustomFieldDataType.Select)
+    component.ngOnInit()
+    component.ngAfterViewInit()
+    component.addSelectOption()
+    fixture.detectChanges()
+    expect(document.activeElement).toBe(selectOptionInputs.last.nativeElement)
+  })
 })
diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
index f4338db0b..db6c7e218 100644
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
@@ -1,4 +1,12 @@
-import { Component, OnInit } from '@angular/core'
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  ViewChildren,
+} from '@angular/core'
 import { FormGroup, FormControl, FormArray } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import {
@@ -10,6 +18,7 @@ import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
+import { Subject, takeUntil } from 'rxjs'
 
 @Component({
   selector: 'pngx-custom-field-edit-dialog',
@@ -18,10 +27,15 @@ import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
 })
 export class CustomFieldEditDialogComponent
   extends EditDialogComponent<CustomField>
-  implements OnInit
+  implements OnInit, AfterViewInit, OnDestroy
 {
   CustomFieldDataType = CustomFieldDataType
 
+  @ViewChildren('selectOption')
+  private selectOptionInputs: QueryList<ElementRef>
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
   private get selectOptions(): FormArray {
     return (this.objectForm.controls.extra_data as FormGroup).controls
       .select_options as FormArray
@@ -49,6 +63,19 @@ export class CustomFieldEditDialogComponent
     }
   }
 
+  ngAfterViewInit(): void {
+    this.selectOptionInputs.changes
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.selectOptionInputs.last.nativeElement.focus()
+      })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(true)
+    this.unsubscribeNotifier.complete()
+  }
+
   getCreateTitle() {
     return $localize`Create new custom field`
   }