fix(core): Dropdown fix for initial open state (#6130)

taiga-family · Nov 30, 2023 · a641af5 · a641af5
1 parent a3e9e95
commit a641af5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts
@@ -1,18 +1,25 @@
-import {Directive, EventEmitter, Input, Output} from '@angular/core';
+import {Directive, EventEmitter, Input, OnChanges, Output} from '@angular/core';
 
 import type {TuiDropdownDirective} from './dropdown.directive';
 
 @Directive({
     selector: '[tuiDropdownOpen],[tuiDropdownOpenChange]',
 })
-export class TuiDropdownOpenDirective {
+export class TuiDropdownOpenDirective implements OnChanges {
     @Input()
-    set tuiDropdownOpen(open: boolean) {
-        this.dropdown?.toggle(open);
-    }
+    tuiDropdownOpen = false;
 
     @Output()
     readonly tuiDropdownOpenChange = new EventEmitter<boolean>();
 
     dropdown?: TuiDropdownDirective;
+
+    update(open: boolean): void {
+        this.tuiDropdownOpen = open;
+        this.tuiDropdownOpenChange.emit(open);
+    }
+
+    ngOnChanges(): void {
+        this.dropdown?.toggle(this.tuiDropdownOpen);
+    }
 }
diff --git a/projects/core/directives/dropdown/dropdown.directive.ts b/projects/core/directives/dropdown/dropdown.directive.ts
@@ -1,5 +1,6 @@
 import {
     AfterViewChecked,
+    AfterViewInit,
     ComponentRef,
     Directive,
     ElementRef,
@@ -47,6 +48,7 @@ import {TuiDropdownOpenDirective} from './dropdown-open.directive';
 export class TuiDropdownDirective
     implements
         AfterViewChecked,
+        AfterViewInit,
         OnDestroy,
         OnChanges,
         TuiPortalItem,
@@ -97,6 +99,12 @@ export class TuiDropdownDirective
         this.refresh$.next();
     }
 
+    ngAfterViewInit(): void {
+        if (this.open) {
+            this.toggle(this.open.tuiDropdownOpen);
+        }
+    }
+
     ngOnChanges(): void {
         if (!this.content) {
             this.toggle(false);
@@ -118,11 +126,11 @@ export class TuiDropdownDirective
     toggle(show: boolean): void {
         if (show && this.content && !this.dropdownBoxRef) {
             this.dropdownBoxRef = this.dropdownService.add(this.component);
-            this.open?.tuiDropdownOpenChange.emit(true);
+            this.open?.update(true);
         } else if (!show && this.dropdownBoxRef) {
             this.dropdownService.remove(this.dropdownBoxRef);
             this.dropdownBoxRef = null;
-            this.open?.tuiDropdownOpenChange.emit(false);
+            this.open?.update(false);
         }
     }
 }