@for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
-
+
}
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
+ 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
- implements OnInit
+ implements OnInit, AfterViewInit, OnDestroy
{
CustomFieldDataType = CustomFieldDataType
+ @ViewChildren('selectOption')
+ private selectOptionInputs: QueryList
+
+ private unsubscribeNotifier: Subject = 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`
}