feat(cdk): support provide custom query selector for auto focus direc…

…tive
taiga-family · Sep 17, 2024 · 7efbf49 · 7efbf49
1 parent bee65c9
commit 7efbf49
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 11 deletions.
diff --git a/projects/cdk/directives/auto-focus/autofocus.options.ts b/projects/cdk/directives/auto-focus/autofocus.options.ts
@@ -14,10 +14,12 @@ export interface TuiAutofocusHandler {
 
 export interface TuiAutofocusOptions {
     readonly delay: number;
+    readonly query: string;
 }
 
 export const TUI_AUTOFOCUS_DEFAULT_OPTIONS: TuiAutofocusOptions = {
     delay: NaN, // NaN = no delay/sync
+    query: 'input,textarea',
 };
 
 export const TUI_AUTOFOCUS_OPTIONS = tuiCreateToken(TUI_AUTOFOCUS_DEFAULT_OPTIONS);
@@ -46,10 +48,19 @@ export const TUI_AUTOFOCUS_PROVIDERS = [
             zone: NgZone,
             win: Window,
             isIos: boolean,
+            options: TuiAutofocusOptions,
         ) =>
             isIos
-                ? new TuiIosAutofocusHandler(el, renderer, zone, win)
-                : new TuiDefaultAutofocusHandler(el, animationFrame$, zone),
-        deps: [ElementRef, WA_ANIMATION_FRAME, Renderer2, NgZone, WA_WINDOW, TUI_IS_IOS],
+                ? new TuiIosAutofocusHandler(el, renderer, zone, win, options)
+                : new TuiDefaultAutofocusHandler(el, animationFrame$, zone, options),
+        deps: [
+            ElementRef,
+            WA_ANIMATION_FRAME,
+            Renderer2,
+            NgZone,
+            WA_WINDOW,
+            TUI_IS_IOS,
+            TUI_AUTOFOCUS_OPTIONS,
+        ],
     },
 ];
diff --git a/projects/cdk/directives/auto-focus/handlers/abstract.handler.ts b/projects/cdk/directives/auto-focus/handlers/abstract.handler.ts
@@ -1,16 +1,19 @@
 import type {ElementRef} from '@angular/core';
 
-import type {TuiAutofocusHandler} from '../autofocus.options';
+import type {TuiAutofocusHandler, TuiAutofocusOptions} from '../autofocus.options';
 
 export abstract class AbstractTuiAutofocusHandler implements TuiAutofocusHandler {
-    constructor(protected readonly el: ElementRef<HTMLElement>) {}
+    constructor(
+        protected readonly el: ElementRef<HTMLElement>,
+        protected readonly options: TuiAutofocusOptions,
+    ) {}
 
     public abstract setFocus(): void;
 
     protected get element(): HTMLElement {
         // TODO: Remove when legacy controls are dropped
         const el = this.el.nativeElement.tagName.includes('-')
-            ? this.el.nativeElement.querySelector<HTMLElement>('input,textarea')
+            ? this.el.nativeElement.querySelector<HTMLElement>(this.options.query)
             : this.el.nativeElement;
 
         return el || this.el.nativeElement;

diff --git a/projects/cdk/directives/auto-focus/handlers/default.handler.ts b/projects/cdk/directives/auto-focus/handlers/default.handler.ts
@@ -3,6 +3,7 @@ import {tuiZonefreeScheduler} from '@taiga-ui/cdk/observables';
 import type {Observable} from 'rxjs';
 import {map, race, skipWhile, take, throttleTime, timer} from 'rxjs';
 
+import type {TuiAutofocusOptions} from '../autofocus.options';
 import {AbstractTuiAutofocusHandler} from './abstract.handler';
 
 const TIMEOUT = 1000;
@@ -13,14 +14,15 @@ export class TuiDefaultAutofocusHandler extends AbstractTuiAutofocusHandler {
         el: ElementRef<HTMLElement>,
         private readonly animationFrame$: Observable<number>,
         private readonly zone: NgZone,
+        options: TuiAutofocusOptions,
     ) {
-        super(el);
+        super(el, options);
     }
 
     public setFocus(): void {
         if (this.isTextFieldElement) {
             race(
-                timer(TIMEOUT),
+                timer(this.options.delay || TIMEOUT),
                 this.animationFrame$.pipe(
                     throttleTime(100, tuiZonefreeScheduler(this.zone)),
                     map(() => this.element.closest(NG_ANIMATION_SELECTOR)),

diff --git a/projects/cdk/directives/auto-focus/handlers/ios.handler.ts b/projects/cdk/directives/auto-focus/handlers/ios.handler.ts
@@ -1,6 +1,7 @@
 import type {ElementRef, NgZone, Renderer2} from '@angular/core';
 import {tuiIsPresent, tuiPx} from '@taiga-ui/cdk/utils';
 
+import type {TuiAutofocusOptions} from '../autofocus.options';
 import {AbstractTuiAutofocusHandler} from './abstract.handler';
 
 const TEXTFIELD_ATTRS = [
@@ -22,8 +23,9 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         private readonly renderer: Renderer2,
         private readonly zone: NgZone,
         private readonly win: Window,
+        options: TuiAutofocusOptions,
     ) {
-        super(el);
+        super(el, options);
         this.patchCssStyles();
     }
 

diff --git a/projects/cdk/directives/auto-focus/test/auto-focus.directive.spec.ts b/projects/cdk/directives/auto-focus/test/auto-focus.directive.spec.ts
@@ -9,8 +9,10 @@ import {
 import type {ComponentFixture} from '@angular/core/testing';
 import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {WA_WINDOW} from '@ng-web-apis/common';
+import type {TuiAutofocusOptions} from '@taiga-ui/cdk';
 import {
     TUI_AUTOFOCUS_HANDLER,
+    TUI_AUTOFOCUS_OPTIONS,
     TuiAutoFocus,
     TuiIosAutofocusHandler,
     tuiIsNativeFocused,
@@ -86,8 +88,15 @@ describe('TuiAutoFocus directive', () => {
                             renderer: Renderer2,
                             zone: NgZone,
                             win: Window,
-                        ) => new TuiIosAutofocusHandler(el, renderer, zone, win),
-                        deps: [ElementRef, Renderer2, NgZone, WA_WINDOW],
+                            options: TuiAutofocusOptions,
+                        ) => new TuiIosAutofocusHandler(el, renderer, zone, win, options),
+                        deps: [
+                            ElementRef,
+                            Renderer2,
+                            NgZone,
+                            WA_WINDOW,
+                            TUI_AUTOFOCUS_OPTIONS,
+                        ],
                     },
                 ],
             });