Add autofocus to search, checkbox & button (#23)

* Add autofocus option to search component

* Add autofocus directive to help with autofocussing components

Author: Matthbo

projects/angular-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankframework/angular-components",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A collection of reusable components designed for use in Frank!Framework projects",
   "main": "",
   "author": "Vivy Booman",

projects/angular-components/src/lib/auto-focus.directive.spec.ts

@@ -0,0 +1,8 @@
+import { AutoFocusDirective } from './auto-focus.directive';
+
+describe('AutoFocusDirective', () => {
+  it('should create an instance', () => {
+    const directive = new AutoFocusDirective();
+    expect(directive).toBeTruthy();
+  });
+});

projects/angular-components/src/lib/auto-focus.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, inject, AfterViewInit, Input, booleanAttribute } from '@angular/core';
+
+@Directive({
+  selector: '[ffAutoFocus]',
+})
+export class AutoFocusDirective implements AfterViewInit {
+  @Input({ transform: booleanAttribute }) ffAutoFocus: boolean = false;
+  private element: ElementRef = inject(ElementRef);
+
+  ngAfterViewInit(): void {
+    if (this.ffAutoFocus) {
+      this.element.nativeElement.focus();
+    }
+  }
+}

projects/angular-components/src/lib/button/button.component.html

@@ -1,3 +1,3 @@
-<button [disabled]="disabled" (click)="toggle()" [ngClass]="{ active: active }">
+<button [disabled]="disabled" (click)="toggle()" [ngClass]="{ active: active }" [ffAutoFocus]="autofocus">
   <ng-content></ng-content>
 </button>

projects/angular-components/src/lib/button/button.component.ts

@@ -1,17 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { booleanAttribute, Component, EventEmitter, Input, Output } from '@angular/core';
+import { AutoFocusDirective } from '../auto-focus.directive';
 
 @Component({
   selector: 'ff-button',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, AutoFocusDirective],
   templateUrl: './button.component.html',
   styleUrl: './button.component.scss',
 })
 export class ButtonComponent {
   @Input({ transform: booleanAttribute }) disabled: boolean = false;
   @Input({ transform: booleanAttribute }) toggleable: boolean = false;
   @Input({ transform: booleanAttribute }) active: boolean = false;
+  @Input({ transform: booleanAttribute }) autofocus: boolean = false;
   @Output() activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   protected toggle(): void {

projects/angular-components/src/lib/checkbox/checkbox.component.html

@@ -1,6 +1,12 @@
 <label (click)="_onClick($event)">
   <span class="content"><ng-content></ng-content></span>
-  <input type="checkbox" [disabled]="disabled" [(ngModel)]="checked" (ngModelChange)="_onChange(this.checked)" />
+  <input
+    type="checkbox"
+    [disabled]="disabled"
+    [(ngModel)]="checked"
+    (ngModelChange)="_onChange(this.checked)"
+    [ffAutoFocus]="autofocus"
+  />
   <span class="check-box"
     ><ff-icon-check width="18" height="18" [colour]="colour" class="check-mark"></ff-icon-check
   ></span>

projects/angular-components/src/lib/checkbox/checkbox.component.ts

@@ -2,6 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, Input
 import { IconCheckComponent } from '../icons/icon-check/icon-check.component';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { noop } from 'rxjs';
+import { AutoFocusDirective } from '../auto-focus.directive';
 
 export const FF_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -12,7 +13,7 @@ export const FF_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 @Component({
   selector: 'ff-checkbox',
   standalone: true,
-  imports: [FormsModule, IconCheckComponent],
+  imports: [FormsModule, IconCheckComponent, AutoFocusDirective],
   templateUrl: './checkbox.component.html',
   styleUrl: './checkbox.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,6 +22,7 @@ export const FF_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 export class CheckboxComponent implements ControlValueAccessor {
   @Input({ transform: booleanAttribute }) disabled: boolean = false;
   @Input({ transform: booleanAttribute }) checked: boolean = false;
+  @Input({ transform: booleanAttribute }) autofocus: boolean = false;
   @Input() colour: string = '#000';
   // @Input() backgroundColour: string = '#FDC300';
 

projects/angular-components/src/lib/search/search.component.html

@@ -8,6 +8,7 @@
     (blur)="_onBlur()"
     (input)="_onInputEvent()"
     (change)="_onInteractionEvent($event)"
+    [ffAutoFocus]="autofocus"
     #input
   />
   @if (focusKeyEnabled && !disabled) {

projects/angular-components/src/lib/search/search.component.ts

@@ -17,6 +17,7 @@ import { IconMagnifierComponent } from '../icons/icon-magnifier/icon-magnifier.c
 import { debounceTime, noop, Subject } from 'rxjs';
 import { NgClass } from '@angular/common';
 import { FocusOnKeyUtil } from '../utils/focus-on-key.util';
+import { AutoFocusDirective } from '../auto-focus.directive';
 
 export const SEARCH_CONTROL_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -27,7 +28,7 @@ export const SEARCH_CONTROL_VALUE_ACCESSOR = {
 @Component({
   selector: 'ff-search',
   standalone: true,
-  imports: [FormsModule, NgClass, IconMagnifierComponent],
+  imports: [FormsModule, NgClass, IconMagnifierComponent, AutoFocusDirective],
   templateUrl: './search.component.html',
   styleUrl: './search.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -36,6 +37,7 @@ export const SEARCH_CONTROL_VALUE_ACCESSOR = {
 export class SearchComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
   @Input() placeholder: string = 'Search...';
   @Input() focusKey: string = '/';
+  @Input({ transform: booleanAttribute }) autofocus: boolean = false;
   @Input({ transform: booleanAttribute }) forceFocus: boolean = false;
   @Input({ transform: booleanAttribute }) focusKeyEnabled: boolean = true;
   @Input({ transform: booleanAttribute }) slim: boolean = false;

src/app/app.component.html

@@ -24,7 +24,7 @@ <h2>Checkbox</h2>
   <li>
     <h2>Search</h2>
     <div class="components">
-      <ff-search [(ngModel)]="searchText" style="width: 100%" forceFocus></ff-search>
+      <ff-search [(ngModel)]="searchText" style="width: 100%" forceFocus autofocus></ff-search>
       <div class="separator">
         <ff-search placeholder="Test the focus key" focusKey="=" style="width: 100%"></ff-search>
         <ff-search placeholder="Disabled" style="width: 100%" disabled></ff-search>