From 857b93a01e5abab88311c3c750322791c11e5676 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 23 Apr 2024 10:07:50 +0300
Subject: [PATCH] fix: accordion hint not shown if title changed #1415

---
 .../accordion-item/accordion-item.component.html       | 10 ++++++++--
 .../accordion-item/accordion-item.component.ts         | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.html b/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.html
index 79c80eae7f..8bdf8f6da6 100644
--- a/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.html
+++ b/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.html
@@ -20,8 +20,14 @@
         <prizm-icons class="header-icon" [name]="$any(content)" size="16"></prizm-icons>
       </ng-container>
     </ng-container>
-    <div class="title" #elem *ngIf="title" [prizmHint]="title" [prizmHintCanShow]="prizmIsTextOverflow(elem)">
-      <ng-container *polymorphOutlet="title as content; context: data">
+    <div
+      class="title"
+      #elem
+      *ngIf="_title"
+      [prizmHint]="_title"
+      [prizmHintCanShow]="prizmIsTextOverflow(elem)"
+    >
+      <ng-container *polymorphOutlet="_title as content; context: data">
         {{ content }}
       </ng-container>
     </div>
diff --git a/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts b/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts
index 32e1295f5a..5c6d7b2c6b 100644
--- a/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts
+++ b/libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts
@@ -46,7 +46,13 @@ import { prizmIconsChevronsDoubleDown } from '@prizm-ui/icons/full/source';
 })
 export class PrizmAccordionItemComponent extends PrizmAbstractTestId implements OnInit, OnDestroy {
   @Input() icon!: PolymorphContent<PrizmAccordionItemData>;
-  @Input() title: PolymorphContent<PrizmAccordionItemData> = '';
+  @Input()
+  set title(value: PolymorphContent<PrizmAccordionItemData>) {
+    this._title = value;
+    queueMicrotask(() => this.cdRef.markForCheck());
+  }
+
+  public _title: PolymorphContent<PrizmAccordionItemData> = '';
   @Input() isExpanded = false;
 
   @Input()
@@ -67,7 +73,7 @@ export class PrizmAccordionItemComponent extends PrizmAbstractTestId implements
   get data() {
     return {
       icon: this.icon,
-      title: this.title,
+      title: this._title,
       isExpanded: this.isExpanded,
       disabled: this._disabled,
       focused: this.isAccordionFocused,