From eac5e63f2f09a5f69d21376891c7a6beca060cc8 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Tue, 26 Nov 2024 11:10:43 -0500
Subject: [PATCH] [CL-513] Fix lifecycle order for toggle title attribute
 (#12152)

---
 .../src/toggle-group/toggle.component.html        |  2 +-
 .../src/toggle-group/toggle.component.ts          | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/toggle-group/toggle.component.html b/libs/components/src/toggle-group/toggle.component.html
index c245d2f462f..d036b1751ba 100644
--- a/libs/components/src/toggle-group/toggle.component.html
+++ b/libs/components/src/toggle-group/toggle.component.html
@@ -6,7 +6,7 @@
   [checked]="selected"
   (change)="onInputInteraction()"
 />
-<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
+<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTitle()">
   <span class="tw-line-clamp-2 tw-break-words" #labelContent>
     <ng-content></ng-content>
   </span>
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index 795683ed1c2..91096b3829b 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -1,5 +1,6 @@
 import {
   AfterContentChecked,
+  AfterViewInit,
   Component,
   ElementRef,
   HostBinding,
@@ -17,7 +18,7 @@ let nextId = 0;
   templateUrl: "./toggle.component.html",
   preserveWhitespaces: false,
 })
-export class ToggleComponent<TValue> implements AfterContentChecked {
+export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewInit {
   id = nextId++;
 
   @Input() value?: TValue;
@@ -30,6 +31,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
   @HostBinding("class") classList = ["tw-group/toggle", "tw-flex", "tw-min-w-16"];
 
   protected bitBadgeContainerHasChidlren = signal(false);
+  protected labelTitle = signal<string>(null);
 
   get name() {
     return this.groupComponent.name;
@@ -43,10 +45,6 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
     return ["tw-peer/toggle-input", "tw-appearance-none", "tw-outline-none"];
   }
 
-  get labelTextContent() {
-    return this.labelContent?.nativeElement.innerText ?? null;
-  }
-
   get labelClasses() {
     return [
       "tw-h-full",
@@ -102,4 +100,11 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
       this.bitBadgeContainer?.nativeElement.childElementCount > 0,
     );
   }
+
+  ngAfterViewInit() {
+    const labelText = this.labelContent?.nativeElement.innerText;
+    if (labelText) {
+      this.labelTitle.set(labelText);
+    }
+  }
 }