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.

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);
   }