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

…tive (#9062)
taiga-family · Sep 19, 2024 · ae149f5 · ae149f5
1 parent cff240f
commit ae149f5
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 39 deletions.
diff --git a/projects/cdk/directives/auto-focus/autofocus.options.ts b/projects/cdk/directives/auto-focus/autofocus.options.ts
@@ -1,8 +1,7 @@
-import type {Provider} from '@angular/core';
-import {ElementRef, InjectionToken, NgZone, Renderer2} from '@angular/core';
+import {ElementRef, NgZone, Renderer2} from '@angular/core';
 import {WA_ANIMATION_FRAME, WA_WINDOW} from '@ng-web-apis/common';
 import {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
-import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiCreateOptions, tuiCreateToken} from '@taiga-ui/cdk/utils';
 import type {Observable} from 'rxjs';
 
 import {TuiDefaultAutofocusHandler} from './handlers/default.handler';
@@ -14,42 +13,40 @@ 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
-};
+export const [TUI_AUTOFOCUS_OPTIONS, tuiAutoFocusOptionsProvider] =
+    tuiCreateOptions<TuiAutofocusOptions>({
+        delay: NaN, // NaN = no delay/sync
+        query: 'input, textarea, select, [contenteditable]',
+    });
 
-export const TUI_AUTOFOCUS_OPTIONS = tuiCreateToken(TUI_AUTOFOCUS_DEFAULT_OPTIONS);
-
-export function tuiAutoFocusOptionsProvider(
-    options: Partial<TuiAutofocusOptions>,
-): Provider {
-    return tuiProvideOptions(
-        TUI_AUTOFOCUS_OPTIONS,
-        options,
-        TUI_AUTOFOCUS_DEFAULT_OPTIONS,
-    );
-}
-
-export const TUI_AUTOFOCUS_HANDLER = new InjectionToken<TuiAutofocusHandler>(
-    '[TUI_AUTOFOCUS_HANDLER]',
-);
+export const TUI_AUTOFOCUS_HANDLER = tuiCreateToken<TuiAutofocusHandler>();
 
 export const TUI_AUTOFOCUS_PROVIDERS = [
     {
         provide: TUI_AUTOFOCUS_HANDLER,
+        deps: [
+            ElementRef,
+            WA_ANIMATION_FRAME,
+            Renderer2,
+            NgZone,
+            WA_WINDOW,
+            TUI_IS_IOS,
+            TUI_AUTOFOCUS_OPTIONS,
+        ],
         useFactory: (
             el: ElementRef<HTMLElement>,
             animationFrame$: Observable<number>,
             renderer: Renderer2,
             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),
     },
 ];
diff --git a/projects/cdk/directives/auto-focus/handlers/abstract.handler.ts b/projects/cdk/directives/auto-focus/handlers/abstract.handler.ts
@@ -1,22 +1,25 @@
 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;
     }
 
     protected get isTextFieldElement(): boolean {
-        return this.element.matches('input, textarea, [contenteditable]');
+        return this.element.matches(this.options.query);
     }
 }
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,
@@ -81,13 +83,20 @@ describe('TuiAutoFocus directive', () => {
                     {
                         provide: TUI_AUTOFOCUS_HANDLER,
                         useClass: TuiIosAutofocusHandler,
+                        deps: [
+                            ElementRef,
+                            Renderer2,
+                            NgZone,
+                            WA_WINDOW,
+                            TUI_AUTOFOCUS_OPTIONS,
+                        ],
                         useFactory: (
                             el: ElementRef<HTMLElement>,
                             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),
                     },
                 ],
             });

diff --git a/projects/cdk/utils/di/create-options.ts b/projects/cdk/utils/di/create-options.ts
@@ -1,10 +1,9 @@
-import type {InjectionToken, Provider} from '@angular/core';
-import type {TuiHandler} from '@taiga-ui/cdk/types';
+import type {FactoryProvider, InjectionToken} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
 
 export function tuiCreateOptions<T>(
     defaults: T,
-): [token: InjectionToken<T>, provider: TuiHandler<Partial<T>, Provider>] {
+): [token: InjectionToken<T>, provider: (item: Partial<T>) => FactoryProvider] {
     const token = tuiCreateToken(defaults);
 
     return [token, (options) => tuiProvideOptions(token, options, defaults)];

diff --git a/projects/cdk/utils/miscellaneous/create-token.ts b/projects/cdk/utils/miscellaneous/create-token.ts
@@ -1,9 +1,9 @@
 import {InjectionToken} from '@angular/core';
 
-export function tuiCreateToken<T>(defaults: T): InjectionToken<T> {
+export function tuiCreateToken<T>(defaults?: T): InjectionToken<T> {
     return tuiCreateTokenFromFactory(() => defaults);
 }
 
-export function tuiCreateTokenFromFactory<T>(factory: () => T): InjectionToken<T> {
-    return new InjectionToken<T>('', {factory});
+export function tuiCreateTokenFromFactory<T>(factory?: () => T): InjectionToken<T> {
+    return factory ? new InjectionToken<T>('', {factory}) : new InjectionToken<T>('');
 }