focus first element after activating ‘Job preparation task’

Azure · Apr 5, 2023 · 5db59b6 · 5db59b6
1 parent 8ec7a70
commit 5db59b6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/@batch-flask/ui/form/complex-form/complex-form.component.ts b/src/@batch-flask/ui/form/complex-form/complex-form.component.ts
@@ -1,5 +1,5 @@
 import {
-    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, HostBinding, Input, OnChanges, QueryList, Type,
+    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, Input, OnChanges, QueryList, Type, ViewChild,
 } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { AsyncTask, Dto, ServerError, autobind } from "@batch-flask/core";
@@ -71,6 +71,8 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
 
     @ContentChildren(FormPageComponent) public pages: QueryList<FormPageComponent>;
 
+    @ViewChild('formElement') formElement: ElementRef;
+
     public mainPage: FormPageComponent;
     public currentPage: FormPageComponent;
     public showJsonEditor = false;
@@ -168,6 +170,10 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
         }
         this._pageStack.push(this.currentPage);
         this.currentPage = page;
+
+        setTimeout(() => {
+            this.focusFirstFocusableElement()
+        });
     }
 
     @autobind()
@@ -268,4 +274,8 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
             multiUse: this.multiUse,
         };
     }
+
+    private focusFirstFocusableElement() {
+        this.formElement.nativeElement?.querySelector('[autofocus], button, input, textarea, select')?.focus()
+    }
 }
diff --git a/src/@batch-flask/ui/form/complex-form/complex-form.html b/src/@batch-flask/ui/form/complex-form/complex-form.html
@@ -10,7 +10,7 @@ <h1 *ngIf="currentPage.title">{{currentPage.title}}</h1>
             </div>
         </div>
         <div *ngIf="!showJsonEditor" class="classic-form-container">
-            <form novalidate>
+            <form #formElement novalidate>
                 <ng-template [ngTemplateOutlet]="currentPage.content"></ng-template>
             </form>
         </div>

diff --git a/src/app/components/job/action/add/job-preparation-task-picker.html b/src/app/components/job/action/add/job-preparation-task-picker.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
     <div class="form-element">
         <bl-form-field>
-            <input blInput formControlName="id" placeholder="ID">
+            <input blInput autofocus formControlName="id" placeholder="ID">
         </bl-form-field>
         <bl-error controlName="id" code="required">ID is a required field</bl-error>
     </div>

diff --git a/src/app/components/job/action/add/job-release-task-picker.html b/src/app/components/job/action/add/job-release-task-picker.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
     <div class="form-element">
         <bl-form-field>
-            <input blInput formControlName="id" placeholder="ID">
+            <input blInput autofocus formControlName="id" placeholder="ID">
         </bl-form-field>
         <bl-error controlName="id" code="required">ID is a required field</bl-error>
     </div>