Set focus on first input when opening filter views

mitwelten · Aug 25, 2023 · b65812b · b65812b
1 parent e13909f
commit b65812b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/src/app/components/deployment-list/deployment-filter.component.ts b/src/app/components/deployment-list/deployment-filter.component.ts
@@ -1,7 +1,8 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 import { FilterStoreService } from 'src/app/shared/filter-store.service';
 import { DeploymentsDataSource } from './deployments-datasource';
+import { MatInput } from '@angular/material/input';
 
 @Component({
   selector: 'app-deployment-filter',
@@ -16,7 +17,7 @@ import { DeploymentsDataSource } from './deployments-datasource';
   <!-- node -->
   <mat-form-field appearance="outline">
     <mat-label>Label / Name</mat-label>
-    <input matInput type="text" formControlName="node">
+    <input #node_label matInput type="text" formControlName="node">
   </mat-form-field>
   <!-- type (select) -->
   <mat-form-field appearance="outline">
@@ -67,14 +68,21 @@ import { DeploymentsDataSource } from './deployments-datasource';
 `
   ]
 })
-export class DeploymentFilterComponent {
+export class DeploymentFilterComponent implements OnInit {
 
   dataSource: DeploymentsDataSource
 
+  @ViewChild('node_label', { static: true, read: MatInput })
+  inputNodeLabel?: MatInput
+
   constructor(
     @Inject(MAT_BOTTOM_SHEET_DATA) public data: {dataSource: DeploymentsDataSource},
     public filterStore: FilterStoreService) {
       this.dataSource = data.dataSource;
     }
 
+  ngOnInit() {
+    this.inputNodeLabel.focus();
+  }
+
 }
diff --git a/src/app/components/node-list/node-filter.component.ts b/src/app/components/node-list/node-filter.component.ts
@@ -1,8 +1,9 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { NodesDataSource } from './list-datasource';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 import { FilterStoreService } from 'src/app/shared/filter-store.service';
 import { DataService } from 'src/app/shared';
+import { MatInput } from '@angular/material/input';
 
 @Component({
   selector: 'app-node-filter',
@@ -17,7 +18,7 @@ import { DataService } from 'src/app/shared';
   <!-- node -->
   <mat-form-field appearance="outline">
     <mat-label>Label / Name</mat-label>
-    <input matInput type="text" formControlName="node_label">
+    <input #node_label matInput type="text" formControlName="node_label">
   </mat-form-field>
   <!-- type (select) -->
   <mat-form-field appearance="outline">
@@ -73,6 +74,9 @@ export class NodeFilterComponent implements OnInit {
   typeOptions: string[];
   platformOptions: string[];
 
+  @ViewChild('node_label', { static: true, read: MatInput })
+  inputNodeLabel?: MatInput
+
   constructor(
     @Inject(MAT_BOTTOM_SHEET_DATA) public data: {dataSource: NodesDataSource},
     public filterStore: FilterStoreService,
@@ -81,6 +85,7 @@ export class NodeFilterComponent implements OnInit {
     }
 
   ngOnInit(): void {
+    this.inputNodeLabel.focus();
     this.dataService.getNodeTypeOptions('').subscribe(
       options => this.typeOptions = options.sort(
         (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())

diff --git a/src/app/components/tag-list/tag-list.component.ts b/src/app/components/tag-list/tag-list.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
@@ -14,17 +14,19 @@ import { DeleteConfirmDialogComponent } from '../delete-confirm-dialog/delete-co
 import { TagFormComponent } from '../tag-form/tag-form.component';
 import { TagsDataSource } from './tags-datasource';
 import { FilterStoreService } from 'src/app/shared/filter-store.service';
+import { MatInput } from '@angular/material/input';
 
 @Component({
   selector: 'app-tag-list',
   templateUrl: './tag-list.component.html',
   styleUrls: ['./tag-list.component.css']
 })
-export class TagListComponent implements AfterViewInit {
+export class TagListComponent implements OnInit, AfterViewInit {
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
   @ViewChild(MatTable) table!: MatTable<Tag>;
+  @ViewChild(MatInput, { static: true }) tagFilterInput?: MatInput;
   @ViewChild('deleteError') deleteErrorDialog: TemplateRef<any>;
   dataSource: TagsDataSource;
   deletePending = false;
@@ -54,6 +56,10 @@ export class TagListComponent implements AfterViewInit {
     this.dataSource = new TagsDataSource(this.dataService);
   }
 
+  ngOnInit(): void {
+    this.tagFilterInput.focus();
+  }
+
   ngAfterViewInit(): void {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;