fix(cdk): remove global styles patching from auto-focus directive

projects/addon-doc/components/navigation/navigation.providers.ts

@@ -5,6 +5,7 @@ import type {Event} from '@angular/router';
 import {ActivatedRoute, NavigationEnd, Router, Scroll} from '@angular/router';
 import {TUI_DOC_PAGES, TUI_DOC_TITLE} from '@taiga-ui/addon-doc/tokens';
 import type {TuiDocRoutePages} from '@taiga-ui/addon-doc/types';
+import {tuiAutoFocusOptionsProvider} from '@taiga-ui/cdk/directives/auto-focus';
 import {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';
 import {tuiScrollbarOptionsProvider} from '@taiga-ui/core/components/scrollbar';
@@ -39,6 +40,7 @@ export const NAVIGATION_ITEMS: InjectionToken<readonly TuiDocRoutePages[]> =
     new InjectionToken<readonly TuiDocRoutePages[]>('[NAVIGATION_ITEMS]');
 
 export const NAVIGATION_PROVIDERS: Provider[] = [
+    tuiAutoFocusOptionsProvider({preventScroll: true}),
     tuiLinkOptionsProvider({appearance: 'icon'}),
     {
         provide: NAVIGATION_TITLE,

projects/addon-doc/components/navigation/navigation.style.less

@@ -65,6 +65,10 @@
     }
 }
 
+.t-prevent-ios-scroll {
+    .tui-prevent-ios-scroll();
+}
+
 .t-subsection {
     margin-left: 0.5rem;
 }

projects/addon-doc/components/navigation/navigation.template.html

@@ -14,6 +14,7 @@
     </code>
     <input
         tuiTextfield
+        class="t-prevent-ios-scroll"
         [formControl]="search"
         [placeholder]="searchText"
         [tuiAutoFocus]="!!sidebar"

projects/cdk/directives/auto-focus/autofocus.options.ts

@@ -14,12 +14,14 @@ export interface TuiAutofocusHandler {
 export interface TuiAutofocusOptions {
     readonly delay: number;
     readonly query: string;
+    readonly preventScroll: boolean;
 }
 
 export const [TUI_AUTOFOCUS_OPTIONS, tuiAutoFocusOptionsProvider] =
     tuiCreateOptions<TuiAutofocusOptions>({
         delay: NaN, // NaN = no delay/sync
         query: 'input, textarea, select, [contenteditable]',
+        preventScroll: false,
     });
 
 export const TUI_AUTOFOCUS_HANDLER = tuiCreateToken<TuiAutofocusHandler>();

projects/cdk/directives/auto-focus/handlers/default.handler.ts

@@ -29,7 +29,9 @@ export class TuiDefaultAutofocusHandler extends AbstractTuiAutofocusHandler {
                     skipWhile(Boolean),
                     take(1),
                 ),
-            ).subscribe(() => this.element.focus({preventScroll: true}));
+            ).subscribe(() =>
+                this.element.focus({preventScroll: this.options.preventScroll}),
+            );
         } else {
             this.element.focus({preventScroll: true});
         }

projects/cdk/directives/auto-focus/handlers/ios.handler.ts

@@ -26,7 +26,6 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         options: TuiAutofocusOptions,
     ) {
         super(el, options);
-        this.patchCssStyles();
     }
 
     public setFocus(): void {
@@ -54,7 +53,7 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
                 fakeInput.removeEventListener('focus', focusHandler);
 
                 elementFocusTimeoutId = this.win.setTimeout(() => {
-                    this.element.focus({preventScroll: false});
+                    this.element.focus({preventScroll: this.options.preventScroll});
                     fakeInput.remove();
                 }, duration);
             });
@@ -134,21 +133,6 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         return !!this.element.closest('tui-dialog');
     }
 
-    /**
-     * @note:
-     * This is necessary so that the viewport isn't recalculated
-     * and then the dialogs don't shake.
-     *
-     * Also, we need to fixed height viewport,
-     * so that when focusing the dialogs don't shake
-     */
-    private patchCssStyles(): void {
-        [this.win.document.documentElement, this.win.document.body].forEach((element) => {
-            element.style.setProperty('overflow', 'auto');
-            element.style.setProperty('height', '100%');
-        });
-    }
-
     /**
      * @note:
      * inherit basic attributes values from real input

projects/core/styles/mixins/mixins.less

@@ -129,3 +129,20 @@
     overflow: hidden;
     padding: 0;
 }
+
+// prevent scrolling to focused element on IOS
+.tui-prevent-ios-scroll() {
+    &:focus {
+        animation: tuiPreventIOSScroll 0.001s;
+    }
+
+    @keyframes tuiPreventIOSScroll {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

projects/core/styles/mixins/mixins.scss

@@ -128,3 +128,20 @@
     overflow: hidden;
     padding: 0;
 }
+
+// prevent scrolling to focused element on IOS
+@mixin tui-prevent-ios-scroll() {
+    &:focus {
+        animation: tuiPreventIOSScroll 0.001s;
+    }
+
+    @keyframes tuiPreventIOSScroll {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

projects/demo/src/modules/components/dialog/examples/7/search-example/search-dialog-example.component.less

@@ -1,3 +1,5 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 :host {
     .search-content {
         padding: 2rem 1.5rem;
@@ -14,3 +16,7 @@
     font: var(--tui-font-heading-6);
     margin: 0 0 1.25rem;
 }
+
+.t-prevent-ios-scroll {
+    .tui-prevent-ios-scroll();
+}

projects/demo/src/modules/components/dialog/examples/7/search-example/search-dialog-example.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiAutoFocus} from '@taiga-ui/cdk';
+import {TuiAutoFocus, tuiAutoFocusOptionsProvider} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
 import {TuiTextfield} from '@taiga-ui/core';
 import {injectContext} from '@taiga-ui/polymorpheus';
@@ -11,6 +11,7 @@ import {injectContext} from '@taiga-ui/polymorpheus';
     templateUrl: './search-dialog-example.template.html',
     styleUrls: ['./search-dialog-example.component.less'],
     changeDetection,
+    providers: [tuiAutoFocusOptionsProvider({preventScroll: true})],
 })
 export class SearchDialogExample {
     private readonly context = injectContext<TuiDialogContext<boolean>>();

projects/demo/src/modules/components/dialog/examples/7/search-example/search-dialog-example.template.html

@@ -6,6 +6,7 @@
         <input
             tuiAutoFocus
             tuiTextfield
+            class="t-prevent-ios-scroll"
         />
     </tui-textfield>
 </div>

projects/demo/src/modules/directives/auto-focus/examples/import/import.md

@@ -8,6 +8,7 @@
   providers: [
     tuiAutoFocusOptionsProvider({
       delay: 300, // NaN = no delay/sync
+      preventScroll: true,
     }),
   ],
 })