From 8399ba2afaecf39e918c7e28c78ba0464e84200e Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Sat, 15 Nov 2025 17:17:16 +0300
Subject: [PATCH 1/2] Improve focus handling for form field visibility

Refactored focus logic to ensure the field is only focused when visible. Added IntersectionObserver to handle cases where the element is not immediately visible, improving accessibility and user experience.
---
 .../extensible-form-prop.component.ts         | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 401bd15c3d..6599647f61 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -155,10 +155,35 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   ngAfterViewInit() {
     if (this.isFirstGroup && this.first && this.fieldRef) {
-      this.fieldRef.nativeElement.focus();
+      this.focusField();
     }
   }
 
+  private focusField() {
+    const element = this.fieldRef.nativeElement;
+    
+    if (this.isElementVisible(element)) {
+      element.focus();
+      return;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && entry.intersectionRatio > 0) {
+          element.focus();
+          observer.disconnect();
+        }
+      });
+    }, { threshold: 0.01 });
+
+    observer.observe(element);
+    setTimeout(() => observer.disconnect(), 5000);
+  }
+
+  private isElementVisible(element: HTMLElement): boolean {
+    return element.offsetParent !== null;
+  }
+
   getComponent(prop: FormProp): string {
     return this.service.getComponent(prop);
   }

From 47fec83ae1c95fc918e27e422e0d406aae253734 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Mon, 17 Nov 2025 11:09:07 +0300
Subject: [PATCH 2/2] Simplify initial field focus logic in form prop component

Replaces the IntersectionObserver-based focus logic with a simpler requestAnimationFrame approach for focusing the first field. This reduces complexity and potential timing issues when focusing the field after view initialization.
---
 .../extensible-form-prop.component.ts         | 29 ++-----------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 6599647f61..ca567d0511 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -155,33 +155,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   ngAfterViewInit() {
     if (this.isFirstGroup && this.first && this.fieldRef) {
-      this.focusField();
-    }
-  }
-
-  private focusField() {
-    const element = this.fieldRef.nativeElement;
-    
-    if (this.isElementVisible(element)) {
-      element.focus();
-      return;
-    }
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting && entry.intersectionRatio > 0) {
-          element.focus();
-          observer.disconnect();
-        }
+      requestAnimationFrame(() => {
+        this.fieldRef.nativeElement.focus();
       });
-    }, { threshold: 0.01 });
-
-    observer.observe(element);
-    setTimeout(() => observer.disconnect(), 5000);
-  }
-
-  private isElementVisible(element: HTMLElement): boolean {
-    return element.offsetParent !== null;
+    }
   }
 
   getComponent(prop: FormProp): string {