refactor!: replace setNativeFocused(el) with el.focus()

taiga-family · Aug 4, 2022 · f93d4ab · f93d4ab
1 parent 7141e4b
commit f93d4ab
Show file tree

Hide file tree

Showing 30 changed files with 47 additions and 138 deletions.
diff --git a/projects/addon-editor/components/toolbar/toolbar-navigation-manager.directive.ts b/projects/addon-editor/components/toolbar/toolbar-navigation-manager.directive.ts
@@ -1,6 +1,5 @@
 import {Directive, ElementRef, HostListener, Inject} from '@angular/core';
 import {
-    setNativeFocused,
     tuiClamp,
     tuiGetClosestFocusable,
     tuiIsNativeFocusedIn,
@@ -39,7 +38,7 @@ export class TuiToolbarNavigationManagerDirective {
             : this.findNextTool(targetToolWrapper);
 
         if (targetTool) {
-            setNativeFocused(targetTool);
+            targetTool.focus();
         }
     }
 

diff --git a/projects/addon-editor/components/toolbar/toolbar.component.ts b/projects/addon-editor/components/toolbar/toolbar.component.ts
@@ -25,7 +25,6 @@ import {
 } from '@taiga-ui/addon-editor/tokens';
 import {
     EMPTY_QUERY,
-    setNativeFocused,
     tuiDefaultProp,
     TuiHandler,
     tuiIsNativeFocusedIn,
@@ -265,15 +264,15 @@ export class TuiToolbarComponent {
         const firstButton = this.navigationManager?.findFirstFocusableTool();
 
         if (firstButton) {
-            setNativeFocused(firstButton);
+            firstButton.focus();
         }
     }
 
     private focusLast(): void {
         const lastButton = this.navigationManager?.findFirstFocusableTool(true);
 
         if (lastButton) {
-            setNativeFocused(lastButton);
+            lastButton.focus();
         }
     }
 }

diff --git a/projects/cdk/directives/focus-trap/focus-trap.directive.ts b/projects/cdk/directives/focus-trap/focus-trap.directive.ts
@@ -9,7 +9,6 @@ import {
 } from '@angular/core';
 import {tuiContainsOrAfter} from '@taiga-ui/cdk/utils/dom';
 import {
-    setNativeFocused,
     tuiBlurNativeFocused,
     tuiGetClosestFocusable,
     tuiGetNativeFocused,
@@ -37,7 +36,7 @@ export class TuiFocusTrapDirective implements OnDestroy {
          */
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         Promise.resolve().then(() => {
-            setNativeFocused(this.elementRef.nativeElement);
+            this.elementRef.nativeElement.focus();
         });
     }
 
@@ -59,7 +58,7 @@ export class TuiFocusTrapDirective implements OnDestroy {
         );
 
         if (focusable) {
-            setNativeFocused(focusable);
+            focusable.focus();
         }
     }
 
@@ -76,7 +75,7 @@ export class TuiFocusTrapDirective implements OnDestroy {
         Promise.resolve().then(() => {
             // TODO: iframe warning
             if (this.activeElement instanceof HTMLElement) {
-                setNativeFocused(this.activeElement);
+                this.activeElement.focus();
             }
         });
     }

diff --git a/projects/cdk/utils/focus/index.ts b/projects/cdk/utils/focus/index.ts
@@ -6,5 +6,4 @@ export * from './is-native-focused-in';
 export * from './is-native-keyboard-focusable';
 export * from './is-native-mouse-focusable';
 export * from './move-focus';
-export * from './set-native-focused';
 export * from './set-native-mouse-focused';
diff --git a/projects/cdk/utils/focus/move-focus.ts b/projects/cdk/utils/focus/move-focus.ts
@@ -1,5 +1,4 @@
 import {tuiIsNativeFocused} from './is-native-focused';
-import {setNativeFocused} from './set-native-focused';
 
 /**
  * Utility method for moving focus in a list of elements
@@ -17,7 +16,7 @@ export function tuiMoveFocus(
     currentIndex += step;
 
     while (currentIndex >= 0 && currentIndex < elements.length) {
-        setNativeFocused(elements[currentIndex]);
+        elements[currentIndex].focus();
 
         if (tuiIsNativeFocused(elements[currentIndex])) {
             return;

diff --git a/projects/cdk/utils/focus/set-native-focused.ts b/projects/cdk/utils/focus/set-native-focused.ts
diff --git a/projects/cdk/utils/focus/set-native-mouse-focused.ts b/projects/cdk/utils/focus/set-native-mouse-focused.ts
@@ -1,5 +1,3 @@
-import {setNativeFocused} from './set-native-focused';
-
 /**
  * Focuses or blurs element with mouse action imitation (to spoof {@link TuiFocusVisibleService})
  *
@@ -25,5 +23,9 @@ export function tuiSetNativeMouseFocused(
         element.dispatchEvent(event);
     }
 
-    setNativeFocused(element, focused, preventScroll);
+    if (focused) {
+        element.focus({preventScroll});
+    } else {
+        element.blur();
+    }
 }
diff --git a/projects/cdk/utils/focus/tests/blur-native-focused.spec.ts b/projects/cdk/utils/focus/tests/blur-native-focused.spec.ts
@@ -1,13 +1,12 @@
 import {tuiBlurNativeFocused} from '../blur-native-focused';
-import {setNativeFocused} from '../set-native-focused';
 
 describe(`blurNativeFocused`, () => {
     let element: HTMLInputElement;
 
     beforeEach(() => {
         element = document.createElement(`input`);
         document.body.appendChild(element);
-        setNativeFocused(element, true);
+        element.focus();
     });
 
     afterAll(() => {

diff --git a/projects/cdk/utils/focus/tests/set-native-focused.spec.ts b/projects/cdk/utils/focus/tests/set-native-focused.spec.ts
diff --git a/projects/core/components/data-list/data-list-dropdown-manager.directive.ts b/projects/core/components/data-list/data-list-dropdown-manager.directive.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import {
     EMPTY_QUERY,
-    setNativeFocused,
     tuiGetClosestFocusable,
     tuiItemsQueryListObservable,
     tuiPreventDefault,
@@ -73,7 +72,7 @@ export class TuiDataListDropdownManagerDirective implements AfterViewInit {
                                 event.stopPropagation();
                             }
 
-                            setNativeFocused(element.nativeElement);
+                            element.nativeElement.focus();
                             // TODO: iframe warning
                             dropdown.open = event instanceof MouseEvent;
                         }),
@@ -168,7 +167,7 @@ export class TuiDataListDropdownManagerDirective implements AfterViewInit {
         );
 
         if (item) {
-            setNativeFocused(item);
+            item.focus();
         }
     }
 }
diff --git a/projects/core/components/data-list/option/option.component.ts b/projects/core/components/data-list/option/option.component.ts
@@ -13,7 +13,6 @@ import {
     TemplateRef,
 } from '@angular/core';
 import {
-    setNativeFocused,
     TuiContextWithImplicit,
     tuiDefaultProp,
     TuiEventWith,
@@ -101,7 +100,7 @@ export class TuiOptionComponent<T = unknown> implements OnDestroy {
     @HostListener(`mousemove.init`, [`$event`])
     @HostListener(`mousemove.silent`, [`$event`])
     onMouseMove({currentTarget}: TuiEventWith<MouseEvent, HTMLElement>): void {
-        setNativeFocused(currentTarget, true, true);
+        currentTarget.focus({preventScroll: true});
     }
 
     // Preventing focus loss upon focused option removal

diff --git a/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts b/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts
@@ -13,7 +13,6 @@ import {
     ViewChild,
 } from '@angular/core';
 import {
-    setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TuiActiveZoneDirective,
     TuiContextWithImplicit,
@@ -233,7 +232,7 @@ export class TuiHostedDropdownComponent implements TuiFocusableElementAccessor {
             return;
         }
 
-        setNativeFocused(focusable);
+        focusable.focus();
         event.preventDefault();
     }
 
@@ -249,7 +248,7 @@ export class TuiHostedDropdownComponent implements TuiFocusableElementAccessor {
         const host = this.nativeFocusableElement;
 
         if (host !== null) {
-            setNativeFocused(host, true, true);
+            host.focus({preventScroll: true});
         }
     }
 

diff --git a/...cts/demo/src/modules/components/data-list/examples/4/custom-list/custom-list.component.ts b/...cts/demo/src/modules/components/data-list/examples/4/custom-list/custom-list.component.ts
@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {EMPTY_ARRAY, setNativeFocused, TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk';
+import {EMPTY_ARRAY, TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk';
 import {TuiDataListComponent, tuiIsEditingKey} from '@taiga-ui/core';
 
 interface Items<T> {
@@ -29,7 +29,7 @@ export class CustomListComponent<T> {
 
     onKeyDown(key: string, element: HTMLElement | null): void {
         if (element && tuiIsEditingKey(key)) {
-            setNativeFocused(element, true, true);
+            element.focus({preventScroll: true});
         }
     }
 }
diff --git a/projects/demo/src/modules/directives/active-zone/examples/1/index.ts b/projects/demo/src/modules/directives/active-zone/examples/1/index.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {setNativeFocused} from '@taiga-ui/cdk';
 import {TuiInputComponent} from '@taiga-ui/kit';
 
 @Component({
@@ -28,7 +27,7 @@ export class TuiActiveZoneExample1 {
 
     onClick({nativeFocusableElement}: TuiInputComponent): void {
         if (nativeFocusableElement) {
-            setNativeFocused(nativeFocusableElement);
+            nativeFocusableElement.focus();
         }
     }
 }
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.ts
@@ -2,7 +2,7 @@ import {Component, ElementRef, QueryList, ViewChildren} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {assets} from '@demo/utils';
-import {EMPTY_QUERY, setNativeFocused, TuiBooleanHandler, tuiPure} from '@taiga-ui/cdk';
+import {EMPTY_QUERY, TuiBooleanHandler, tuiPure} from '@taiga-ui/cdk';
 import {TuiOptionComponent} from '@taiga-ui/core';
 import {tuiGetWordRange} from '@taiga-ui/kit';
 
@@ -53,7 +53,7 @@ export class TuiDropdownSelectionExample2 {
         }
 
         event.preventDefault();
-        setNativeFocused(item.nativeElement);
+        item.nativeElement.focus();
     }
 
     filterItems(textarea: HTMLTextAreaElement): readonly User[] {
@@ -68,7 +68,7 @@ export class TuiDropdownSelectionExample2 {
         const caret = value.indexOf(login) + login.length;
 
         this.value = value;
-        setNativeFocused(textarea);
+        textarea.focus();
         textarea.value = value;
         textarea.setSelectionRange(caret, caret);
     }

diff --git a/projects/kit/components/combo-box/combo-box.component.ts b/projects/kit/components/combo-box/combo-box.component.ts
@@ -15,7 +15,6 @@ import {
 import {NgControl} from '@angular/forms';
 import {
     AbstractTuiNullableControl,
-    setNativeFocused,
     TUI_STRICT_MATCHER,
     TuiActiveZoneDirective,
     TuiContextWithImplicit,
@@ -230,7 +229,7 @@ export class TuiComboBoxComponent<T>
 
     private focusInput(preventScroll: boolean = false): void {
         if (this.nativeFocusableElement) {
-            setNativeFocused(this.nativeFocusableElement, true, preventScroll);
+            this.nativeFocusableElement.focus({preventScroll});
         }
     }
 }
diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts
@@ -13,7 +13,6 @@ import {
 import {NgControl} from '@angular/forms';
 import {
     AbstractTuiControl,
-    setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TUI_IS_MOBILE,
     tuiClamp,
@@ -175,7 +174,7 @@ export class TuiInputCountComponent
         }
 
         event.preventDefault();
-        setNativeFocused(this.nativeFocusableElement);
+        this.nativeFocusableElement.focus();
     }
 
     onFocused(focused: boolean): void {

diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts
@@ -18,7 +18,6 @@ import {
     DATE_FILLER_LENGTH,
     DATE_RANGE_FILLER_LENGTH,
     RANGE_SEPARATOR_CHAR,
-    setNativeFocused,
     TUI_DATE_FORMAT,
     TUI_DATE_SEPARATOR,
     TUI_FIRST_DAY,
@@ -372,7 +371,7 @@ export class TuiInputDateRangeComponent
 
     private focusInput(preventScroll: boolean = false): void {
         if (this.nativeFocusableElement) {
-            setNativeFocused(this.nativeFocusableElement, true, preventScroll);
+            this.nativeFocusableElement.focus({preventScroll});
         }
     }
 

diff --git a/projects/kit/components/input-phone-international/input-phone-international.component.ts b/projects/kit/components/input-phone-international/input-phone-international.component.ts
@@ -16,7 +16,6 @@ import {NgControl} from '@angular/forms';
 import {
     AbstractTuiControl,
     CHAR_PLUS,
-    setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TuiContextWithImplicit,
     tuiDefaultProp,
@@ -190,7 +189,7 @@ export class TuiInputPhoneInternationalComponent
         }
 
         if (this.nativeFocusableElement) {
-            setNativeFocused(this.nativeFocusableElement);
+            this.nativeFocusableElement.focus();
         }
     }