fix(core): DropdownOpen fix initial open state (#9581)

Co-authored-by: taiga-family-bot <[email protected]>

projects/core/classes/driver.ts

@@ -1,4 +1,4 @@
-import type {ExistingProvider, OnInit, Type} from '@angular/core';
+import type {AfterViewInit, ExistingProvider, Type} from '@angular/core';
 import {DestroyRef, Directive, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
@@ -15,15 +15,20 @@ export function tuiAsDriver(driver: Type<TuiDriver>): ExistingProvider {
 }
 
 @Directive()
-export abstract class TuiDriverDirective implements OnInit {
+export abstract class TuiDriverDirective implements AfterViewInit {
     public abstract type: string;
 
     private readonly destroyRef = inject(DestroyRef);
-    private readonly drivers: readonly TuiDriver[] = inject<any>(TuiDriver);
-    private readonly vehicles: readonly TuiVehicle[] = inject<any>(TuiVehicle);
+    private readonly drivers: readonly TuiDriver[] =
+        inject<any>(TuiDriver, {self: true, optional: true}) || [];
 
-    public ngOnInit(): void {
-        const vehicle = this.vehicles.find(({type}) => type === this.type);
+    private readonly vehicles: readonly TuiVehicle[] = inject<any>(TuiVehicle, {
+        self: true,
+        optional: true,
+    });
+
+    public ngAfterViewInit(): void {
+        const vehicle = this.vehicles?.find(({type}) => type === this.type);
 
         merge(...this.drivers.filter(({type}) => type === this.type))
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))

projects/core/components/dialog/dialog.style.less

@@ -130,13 +130,6 @@
     }
 }
 
-.t-wrapper {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    order: -1;
-}
-
 .t-filler {
     flex-grow: 1;
 }

projects/core/components/dialog/dialog.template.html

@@ -32,22 +32,18 @@
 <div class="t-filler"></div>
 
 <!-- Close button is insensitive to `context.closeable === Observable<false>` by design -->
-<div
+<button
     *ngIf="context.closeable"
-    class="t-wrapper"
+    automation-id="tui-dialog__close"
+    tuiIconButton
+    type="button"
+    class="t-close"
+    [appearance]="isMobile() ? 'icon' : 'neutral'"
+    [iconStart]="icons.close"
+    [size]="isMobile() ? 'xs' : 's'"
+    [style.border-radius.%]="100"
+    (click)="close$.next()"
+    (mousedown.prevent.silent)="(0)"
 >
-    <button
-        automation-id="tui-dialog__close"
-        tuiIconButton
-        type="button"
-        class="t-close"
-        [appearance]="isMobile() ? 'icon' : 'neutral'"
-        [iconStart]="icons.close"
-        [size]="isMobile() ? 'xs' : 's'"
-        [style.border-radius.%]="100"
-        (click)="close$.next()"
-        (mousedown.prevent.silent)="(0)"
-    >
-        {{ closeWord$ | async }}
-    </button>
-</div>
+    {{ closeWord$ | async }}
+</button>

projects/core/directives/dropdown/dropdown.driver.ts

@@ -1,16 +1,19 @@
 import {Directive, Injectable} from '@angular/core';
 import type {TuiDriver} from '@taiga-ui/core/classes';
 import {TuiDriverDirective} from '@taiga-ui/core/classes';
-import {Subject} from 'rxjs';
+import {BehaviorSubject} from 'rxjs';
 
 @Injectable()
-export class TuiDropdownDriver extends Subject<boolean> implements TuiDriver {
+export class TuiDropdownDriver extends BehaviorSubject<boolean> implements TuiDriver {
     public readonly type = 'dropdown';
+
+    constructor() {
+        super(false);
+    }
 }
 
 @Directive({
     standalone: true,
-    selector: '[tuiDropdownDriver]',
 })
 export class TuiDropdownDriverDirective extends TuiDriverDirective {
     public readonly type = 'dropdown';

projects/demo/src/modules/app/app.style.less

@@ -42,3 +42,12 @@ app {
         display: flex !important;
     }
 }
+
+html {
+    font-size: 100%;
+
+    .ios-only({
+        /* stylelint-disable-next-line */
+        font: -apple-system-body;
+    });
+}

projects/legacy/directives/legacy-dropdown-open-monitor/legacy-dropdown-open-monitor.ts

@@ -1,4 +1,5 @@
-import {Directive, inject} from '@angular/core';
+import type {AfterViewInit} from '@angular/core';
+import {DestroyRef, Directive, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiGetClosestFocusable} from '@taiga-ui/cdk/utils/focus';
@@ -9,27 +10,30 @@ import {distinctUntilChanged} from 'rxjs';
     standalone: true,
     selector: '[tuiDropdownOpenMonitor]',
 })
-export class TuiLegacyDropdownOpenMonitorDirective {
+export class TuiLegacyDropdownOpenMonitorDirective implements AfterViewInit {
+    private readonly destroyRef = inject(DestroyRef);
     private readonly el = tuiInjectElement();
     private readonly host = inject(TuiDropdownOpen, {self: true});
     private readonly external = inject(TuiDropdownOpenLegacy, {
         optional: true,
     });
 
-    protected readonly $ = this.host.driver
-        .pipe(distinctUntilChanged(), takeUntilDestroyed())
-        .subscribe((open) => this.external?.tuiDropdownOpenChange.next(open));
+    public ngAfterViewInit(): void {
+        this.external?.tuiDropdownOpenChange
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((open) => {
+                if (open) {
+                    tuiGetClosestFocusable({
+                        initial: this.el,
+                        root: this.el,
+                    })?.focus();
+                }
 
-    protected readonly $1 = this.external?.tuiDropdownOpenChange
-        .pipe(distinctUntilChanged(), takeUntilDestroyed())
-        .subscribe((open) => {
-            if (open) {
-                tuiGetClosestFocusable({
-                    initial: this.el,
-                    root: this.el,
-                })?.focus();
-            }
+                this.host.toggle(open);
+            });
 
-            this.host.toggle(open);
-        });
+        this.host.driver
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((open) => this.external?.tuiDropdownOpenChange.next(open));
+    }
 }