Merge pull request #23778 from abpframework/issue/focusProblemOnFormProps

Angular - Fixing the property focus problem on extensible form props

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -20,6 +20,8 @@ import {
   SimpleChanges,
   SkipSelf,
   ViewChild,
+  signal,
+  effect,
 } from '@angular/core';
 import {
   ControlContainer,
@@ -99,6 +101,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   @Input() isFirstGroup?: boolean;
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
+  private shouldFocus = signal(false);
+  private isViewReady = signal(false);
+
   injectorForCustomComponent?: Injector;
   asterisk = '';
   containerClassName = 'mb-2';
@@ -115,6 +120,15 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     return this.disabledFn(this.data);
   }
 
+  constructor() {
+    // Effect to handle focus when both conditions are met
+    effect(() => {
+      if (this.shouldFocus() && this.isViewReady() && this.fieldRef?.nativeElement) {
+        this.focusElement();
+      }
+    });
+  }
+
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
     this.typeaheadModel = selectedOption || { key: null, value: null };
     const { key, value } = this.typeaheadModel;
@@ -156,9 +170,20 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     this.asterisk = this.service.calcAsterisks(this.validators);
   }
 
-  ngAfterViewInit() {
-    if (this.isFirstGroup && this.first && this.fieldRef) {
+  private focusElement() {
+    try {
       this.fieldRef.nativeElement.focus();
+      this.shouldFocus.set(false);
+    } catch (error) {
+      console.error('Error focusing field:', error);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.isViewReady.set(true);
+
+    if (this.isFirstGroup && this.first) {
+      this.shouldFocus.set(true);
     }
   }