Setting items will auto focus when switching into edit mode

UI/Web/src/app/settings/_components/setting-item/setting-item.component.ts

@@ -2,9 +2,16 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ContentChild, ElementRef, EventEmitter, HostListener,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  HostListener,
   inject,
-  Input, OnChanges, Output, SimpleChange, SimpleChanges,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChange,
+  SimpleChanges,
   TemplateRef
 } from '@angular/core';
 import {TranslocoDirective} from "@jsverse/transloco";
@@ -28,6 +35,7 @@ import {AbstractControl} from "@angular/forms";
 export class SettingItemComponent implements OnChanges {
 
   private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly elementRef = inject(ElementRef);
 
   @Input({required:true}) title: string = '';
   @Input() editLabel: string | undefined = undefined;
@@ -98,11 +106,10 @@ export class SettingItemComponent implements OnChanges {
       if (!this.canEdit) return;
       if (this.control != null && this.control.invalid) return;
 
-      console.log('isEditMode', this.isEditMode, 'currentValue', change.currentValue);
       this.isEditMode = change.currentValue;
-      //this.editMode.emit(this.isEditMode);
       this.cdRef.markForCheck();
 
+      this.focusInput();
     }
   }
 
@@ -114,7 +121,27 @@ export class SettingItemComponent implements OnChanges {
 
     this.isEditMode = !this.isEditMode;
     this.editMode.emit(this.isEditMode);
+    this.focusInput();
     this.cdRef.markForCheck();
   }
 
+  focusInput() {
+    if (this.isEditMode) {
+
+
+      setTimeout(() => {
+        const inputElem = this.findFirstInput();
+        if (inputElem) {
+          inputElem.focus();
+        }
+      }, 10);
+    }
+  }
+
+  private findFirstInput(): HTMLInputElement | null {
+    const nativeInputs = [...this.elementRef.nativeElement.querySelectorAll('input'), ...this.elementRef.nativeElement.querySelectorAll('select'), ...this.elementRef.nativeElement.querySelectorAll('textarea')];
+    if (nativeInputs.length === 0) return null;
+
+    return nativeInputs[0];
+  }
 }