chore: fix

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.component.ts

@@ -11,7 +11,7 @@ import {TuiKeyboardService} from '@taiga-ui/addon-mobile/services';
 import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';
 import type {TuiSwipeEvent} from '@taiga-ui/cdk/directives/swipe';
 import {TuiSwipe} from '@taiga-ui/cdk/directives/swipe';
-import {tuiInjectElement, tuiIsElement, tuiIsNodeIn} from '@taiga-ui/cdk/utils/dom';
+import {tuiInjectElement, tuiIsElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiGetNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
@@ -92,12 +92,10 @@ export class TuiDropdownMobileComponent implements OnDestroy, AfterViewInit {
 
     protected onClick(event: MouseEvent): void {
         if (
-            !this.el.contains(event.target as Node) &&
-            // TODO: find a better way to check if the click is inside interactive element in textfield
-            !(
-                tuiIsNodeIn(event.target as Node, 'tui-svg') ||
-                (tuiIsElement(event.target) && event.target.tagName === 'button')
-            )
+            tuiIsElement(event.target) &&
+            !this.el.contains(event.target) &&
+            (!this.dropdown.el.contains(event.target) ||
+                event.target.matches('input,textarea'))
         ) {
             event.stopPropagation();
         }

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less

@@ -48,7 +48,7 @@ tui-dropdown-mobile._sheet {
     overflow: auto;
     background: var(--tui-service-backdrop);
     /* stylelint-disable-next-line */
-    box-shadow: 0 -50vh 5rem 5rem var(--tui-service-backdrop);
+    box-shadow: 0 -80vh 0 5rem var(--tui-service-backdrop);
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
     overscroll-behavior: none;

projects/core/directives/dropdown/dropdown-open-legacy.directive.ts

@@ -0,0 +1,20 @@
+import {Directive, Input, Output} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+/**
+ * @deprecated TODO: remove in v.5 when legacy controls are dropped
+ */
+@Directive({
+    standalone: true,
+    selector:
+        '[tuiDropdownOpen]:not([tuiDropdown]),[tuiDropdownOpenChange]:not([tuiDropdown])',
+})
+export class TuiDropdownOpenLegacy {
+    @Output()
+    public readonly tuiDropdownOpenChange = new BehaviorSubject(false);
+
+    @Input()
+    public set tuiDropdownOpen(open: boolean) {
+        this.tuiDropdownOpenChange.next(open);
+    }
+}

projects/core/directives/dropdown/dropdown-open.directive.ts

@@ -46,7 +46,7 @@ function shouldClose(this: TuiDropdownOpen, event: Event | KeyboardEvent): boole
 
 @Directive({
     standalone: true,
-    selector: '[tuiDropdownOpen],[tuiDropdownOpenChange]',
+    selector: '[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',
     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
     hostDirectives: [
         TuiObscured,
@@ -61,8 +61,7 @@ export class TuiDropdownOpen implements OnChanges {
     @ContentChild('tuiDropdownHost', {descendants: true, read: ElementRef})
     private readonly dropdownHost?: ElementRef<HTMLElement>;
 
-    // TODO: Remove optional after refactor is complete
-    private readonly directive = inject(TuiDropdownDirective, {optional: true});
+    private readonly directive = inject(TuiDropdownDirective);
     private readonly el = tuiInjectElement();
     private readonly obscured = inject(TuiObscured);
 
@@ -72,8 +71,7 @@ export class TuiDropdownOpen implements OnChanges {
         fromEvent(this.el, 'focusin').pipe(
             map(tuiGetActualTarget),
             filter(
-                (target) =>
-                    !this.host.contains(target) || !this.directive?.dropdownBoxRef,
+                (target) => !this.host.contains(target) || !this.directive.dropdownBoxRef,
             ),
         ),
     )
@@ -93,12 +91,7 @@ export class TuiDropdownOpen implements OnChanges {
     public readonly driver = inject(TuiDropdownDriver);
 
     public get dropdown(): HTMLElement | undefined {
-        return this.directive?.dropdownBoxRef?.location.nativeElement;
-    }
-
-    // TODO: make it private when all legacy controls will be deleted from @taiga-ui/legacy (5.0)
-    public get focused(): boolean {
-        return tuiIsNativeFocusedIn(this.host) || tuiIsNativeFocusedIn(this.dropdown);
+        return this.directive.dropdownBoxRef?.location.nativeElement;
     }
 
     public ngOnChanges(): void {
@@ -168,6 +161,10 @@ export class TuiDropdownOpen implements OnChanges {
         return tuiIsElementEditable(this.host);
     }
 
+    private get focused(): boolean {
+        return tuiIsNativeFocusedIn(this.host) || tuiIsNativeFocusedIn(this.dropdown);
+    }
+
     private update(open: boolean): void {
         if (open && !this.tuiDropdownEnabled) {
             return;

projects/core/directives/dropdown/dropdown.ts

@@ -5,6 +5,7 @@ import {TuiDropdownContext} from './dropdown-context.directive';
 import {TuiDropdownHover} from './dropdown-hover.directive';
 import {TuiDropdownManual} from './dropdown-manual.directive';
 import {TuiDropdownOpen} from './dropdown-open.directive';
+import {TuiDropdownOpenLegacy} from './dropdown-open-legacy.directive';
 import {TuiDropdownOptionsDirective} from './dropdown-options.directive';
 import {TuiDropdownPortal} from './dropdown-portal.directive';
 import {TuiDropdownPosition} from './dropdown-position.directive';
@@ -17,6 +18,7 @@ export const TuiDropdown = [
     TuiDropdownDirective,
     TuiDropdownComponent,
     TuiDropdownOpen,
+    TuiDropdownOpenLegacy,
     TuiDropdownPortal,
     TuiDropdownManual,
     TuiDropdownHover,

projects/core/directives/dropdown/index.ts

@@ -10,6 +10,7 @@ export * from './dropdown-hover.directive';
 export * from './dropdown-hover.options';
 export * from './dropdown-manual.directive';
 export * from './dropdown-open.directive';
+export * from './dropdown-open-legacy.directive';
 export * from './dropdown-options.directive';
 export * from './dropdown-portal.directive';
 export * from './dropdown-position.directive';

projects/demo/src/modules/directives/dropdown/examples/6/index.html

@@ -31,6 +31,7 @@
     [stringify]="stringify"
     [tuiDropdownOpen]="open()"
     [tuiTextfieldCleaner]="true"
+    [tuiTextfieldLabelOutside]="true"
     [(ngModel)]="selected"
     (tuiDropdownOpenChange)="open.set($event)"
 >

projects/legacy/components/combo-box/combo-box.component.ts

@@ -115,7 +115,8 @@ export class TuiComboBoxComponent<T>
 
     public get focused(): boolean {
         return (
-            tuiIsNativeFocused(this.nativeFocusableElement) || !!this.dropdown?.focused
+            tuiIsNativeFocused(this.nativeFocusableElement) ||
+            !!this.dropdown?.tuiDropdownOpen
         );
     }
 

projects/legacy/components/input-phone/input-phone.component.ts

@@ -112,7 +112,8 @@ export class TuiInputPhoneComponent
 
     public get focused(): boolean {
         return (
-            tuiIsNativeFocused(this.nativeFocusableElement) || !!this.dropdown?.focused
+            tuiIsNativeFocused(this.nativeFocusableElement) ||
+            !!this.dropdown?.tuiDropdownOpen
         );
     }
 

projects/legacy/components/input-tag/input-tag.component.ts

@@ -211,7 +211,7 @@ export class TuiInputTagComponent
     }
 
     public get focused(): boolean {
-        return tuiIsNativeFocusedIn(this.el) || !!this.dropdown?.focused;
+        return tuiIsNativeFocusedIn(this.el) || !!this.dropdown?.tuiDropdownOpen;
     }
 
     public onTagEdited(value: string, index: number): void {

projects/legacy/components/input/input.component.ts

@@ -74,7 +74,8 @@ export class TuiInputComponent
 
     public get focused(): boolean {
         return (
-            tuiIsNativeFocused(this.nativeFocusableElement) || !!this.dropdown?.focused
+            tuiIsNativeFocused(this.nativeFocusableElement) ||
+            !!this.dropdown?.tuiDropdownOpen
         );
     }
 

projects/legacy/components/multi-select/multi-select.component.ts

@@ -142,7 +142,7 @@ export class TuiMultiSelectComponent<T>
     }
 
     public get focused(): boolean {
-        return !!this.input?.focused || !!this.dropdown?.focused;
+        return !!this.input?.focused || !!this.dropdown?.tuiDropdownOpen;
     }
 
     public onValueChange(value: readonly T[]): void {

projects/legacy/components/select/select.component.ts

@@ -106,7 +106,8 @@ export class TuiSelectComponent<T>
 
     public get focused(): boolean {
         return (
-            tuiIsNativeFocused(this.nativeFocusableElement) || !!this.dropdown?.focused
+            tuiIsNativeFocused(this.nativeFocusableElement) ||
+            !!this.dropdown?.tuiDropdownOpen
         );
     }
 

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

@@ -2,7 +2,7 @@ import {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';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownOpen, TuiDropdownOpenLegacy} from '@taiga-ui/core/directives/dropdown';
 import {distinctUntilChanged} from 'rxjs';
 
 @Directive({
@@ -12,28 +12,26 @@ import {distinctUntilChanged} from 'rxjs';
 export class TuiLegacyDropdownOpenMonitorDirective {
     private readonly el = tuiInjectElement();
     private readonly host = inject(TuiDropdownOpen, {self: true});
-    private readonly external = inject(TuiDropdownOpen, {
-        skipSelf: true,
+    private readonly external = inject(TuiDropdownOpenLegacy, {
         optional: true,
     });
 
     constructor() {
-        if (this.external && !this.external['directive']) {
-            this.host.driver
-                .pipe(distinctUntilChanged(), takeUntilDestroyed())
-                .subscribe((open) => this.external?.toggle(open));
-            this.external.driver
-                .pipe(distinctUntilChanged(), takeUntilDestroyed())
-                .subscribe((value) => {
-                    if (value) {
-                        tuiGetClosestFocusable({
-                            initial: this.el,
-                            root: this.el,
-                        })?.focus();
-                    }
+        this.host.driver
+            .pipe(distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe((open) => this.external?.tuiDropdownOpenChange.next(open));
 
-                    this.host.toggle(value);
-                });
-        }
+        this.external?.tuiDropdownOpenChange
+            .pipe(distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe((open) => {
+                if (open) {
+                    tuiGetClosestFocusable({
+                        initial: this.el,
+                        root: this.el,
+                    })?.focus();
+                }
+
+                this.host.toggle(open);
+            });
     }
 }