From f26c9380e088f4e9de23ab9bc11c367c0943c453 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Tue, 22 Jun 2021 11:56:41 +0300
Subject: [PATCH 1/2] trigger focus on first element of extensible form

---
 .../extensible-form-prop.component.html       |  6 +++++
 .../extensible-form-prop.component.ts         | 24 +++++++++++++++++--
 .../extensible-form.component.html            |  3 ++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index c3fdbdff07..a197405837 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -2,6 +2,7 @@
   <ng-template ngSwitchCase="input">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <input
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [autocomplete]="prop.autocomplete"
@@ -19,6 +20,7 @@
   <ng-template ngSwitchCase="checkbox">
     <div class="custom-checkbox custom-control" validationTarget>
       <input
+        #field
         [id]="prop.id"
         [formControlName]="prop.name"
         [abpDisabled]="disabled"
@@ -35,6 +37,7 @@
   <ng-template ngSwitchCase="select">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <select
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
@@ -52,6 +55,7 @@
   <ng-template ngSwitchCase="multiselect">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <select
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
@@ -71,6 +75,7 @@
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <div #typeahead class="position-relative" validationStyle validationTarget>
       <input
+        #field
         [id]="prop.id"
         [autocomplete]="prop.autocomplete"
         [abpDisabled]="disabled"
@@ -116,6 +121,7 @@
   <ng-template ngSwitchCase="textarea">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <textarea
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 238eb8d066..56221377fc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,13 +1,22 @@
-import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core';
 import {
+  ABP,
+  AbpValidators,
+  AutofocusDirective,
+  ConfigStateService,
+  TrackByService,
+} from '@abp/ng.core';
+import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
   OnChanges,
   Optional,
   SimpleChanges,
   SkipSelf,
+  ViewChild,
 } from '@angular/core';
 import {
   ControlContainer,
@@ -43,11 +52,15 @@ import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
     { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
-export class ExtensibleFormPropComponent implements OnChanges {
+export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   @Input() data: PropData;
 
   @Input() prop: FormProp;
 
+  @Input() first: boolean;
+
+  @ViewChild('field') private fieldRef: ElementRef<HTMLElement>;
+
   asterisk = '';
 
   options$: Observable<ABP.Option<any>[]> = of([]);
@@ -116,6 +129,13 @@ export class ExtensibleFormPropComponent implements OnChanges {
     this.asterisk = this.validators.some(isRequired) ? '*' : '';
   }
 
+  ngAfterViewInit() {
+    if (this.first && this.fieldRef) {
+      const autofocusDirective = new AutofocusDirective(this.fieldRef);
+      autofocusDirective.ngAfterViewInit();
+    }
+  }
+
   getComponent(prop: FormProp): string {
     switch (prop.type) {
       case ePropType.Boolean:
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
index f8b5fba383..259538820b 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="form">
   <ng-container *abpPropData="let data; fromList: propList; withRecord: record">
-    <ng-container *ngFor="let prop of propList; trackBy: track.by('name')">
+    <ng-container *ngFor="let prop of propList; let first = first; trackBy: track.by('name')">
       <ng-container *ngIf="prop.visible(data)">
         <ng-container
           [formGroupName]="extraPropertiesKey"
@@ -14,6 +14,7 @@
             *ngIf="form.get(prop.name)"
             [prop]="prop"
             [data]="data"
+            [first]="first"
           ></abp-extensible-form-prop>
         </ng-template>
       </ng-container>

From 3fe30268601c28e43862901fdb0ddf1f73de5eaf Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 23 Jun 2021 10:26:14 +0300
Subject: [PATCH 2/2] refactor focus method

---
 .../extensible-form/extensible-form-prop.component.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 56221377fc..0f792e8578 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,10 +1,4 @@
-import {
-  ABP,
-  AbpValidators,
-  AutofocusDirective,
-  ConfigStateService,
-  TrackByService,
-} from '@abp/ng.core';
+import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -131,8 +125,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   ngAfterViewInit() {
     if (this.first && this.fieldRef) {
-      const autofocusDirective = new AutofocusDirective(this.fieldRef);
-      autofocusDirective.ngAfterViewInit();
+      this.fieldRef.nativeElement.focus();
     }
   }