Improve truncation and expand logic in sidebar list

src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts

@@ -37,6 +37,7 @@ export class SidebarSearchListElementComponent<T extends SearchResult<K>, K exte
   expandable = false;
   expanded = false;
   private truncatedStates: Map<number, boolean> = new Map();
+  private initialTruncated = false; // remembers if any child was ever truncated
 
   @ViewChildren(TruncatablePartComponent) truncatableComponents: QueryList<TruncatablePartComponent>;
 
@@ -191,6 +192,9 @@ export class SidebarSearchListElementComponent<T extends SearchResult<K>, K exte
    */
   onTruncatedStateChange(index: number, isTruncated: boolean): void {
     this.truncatedStates.set(index, isTruncated);
+    if (isTruncated) {
+      this.initialTruncated = true;
+    }
     this.updateExpandableState();
   }
 
@@ -199,8 +203,9 @@ export class SidebarSearchListElementComponent<T extends SearchResult<K>, K exte
    */
   private updateExpandableState(): void {
     const anyTruncated = Array.from(this.truncatedStates.values()).some(state => state === true);
-    if (this.expandable !== anyTruncated) {
-      setTimeout(() => this.expandable = anyTruncated, 0);
+    const effectiveTruncated = (this.expanded && this.initialTruncated) ? true : anyTruncated;
+    if (this.expandable !== effectiveTruncated) {
+      setTimeout(() => this.expandable = effectiveTruncated, 0);
     }
   }
 

src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts

@@ -193,26 +193,29 @@ describe('TruncatablePartComponent', () => {
       expect(comp.lines).toBe('1');
     });
 
-    it('should toggle expandable from false to true', () => {
-      comp.expandable = false;
+    it('should toggle expand from false to true', () => {
+      comp.expand = false;
       comp.toggleWithoutId(true);
 
-      expect(comp.expandable).toBe(true);
+      expect(comp.expand).toBe(true);
     });
 
-    it('should toggle expandable from true to false', () => {
-      comp.expandable = true;
+    it('should toggle expand from true to false', () => {
+      comp.expand = true;
       comp.toggleWithoutId(false);
 
-      expect(comp.expandable).toBe(false);
+      expect(comp.expand).toBe(false);
     });
   });
 
   describe('When noIdExpandable is false (default behavior)', () => {
     beforeEach(() => {
       comp.externalToggle = false;
-      comp.id = 'test-id-123';
+      // use id '1' to simulate collapsed state from mock service
+      comp.id = '1';
       comp.minLines = 3;
+      // re-evaluate lines after changing id
+      (comp as any).setLines();
       fixture.detectChanges();
     });
 

src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

@@ -118,7 +118,6 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes
     }
     if (this.id){
       this.service.toggle(this.id);
-      this.expandable = !this.expandable;
     } else {
       this.toggleWithoutId(expand);
     }
@@ -128,50 +127,30 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes
    * check for the truncate element
    */
   public truncateElement() {
-    if (this.showToggle || this.externalToggle) {
-      const entry = this.content.nativeElement;
-      if (entry.scrollHeight > entry.offsetHeight) {
-        if (entry.children.length > 0) {
-          if (entry.children[entry.children.length - 1].offsetHeight > entry.offsetHeight) {
-            entry.classList.add('truncated');
-            entry.classList.remove('removeFaded');
-            if (this.externalToggle) {
-              this.truncated.emit(true);
-            }
-          } else {
-            entry.classList.remove('truncated');
-            entry.classList.add('removeFaded');
-            if (this.externalToggle) {
-              this.truncated.emit(false);
-            }
-          }
-        } else {
-          if (entry.innerText.length > 0) {
-            entry.classList.add('truncated');
-            entry.classList.remove('removeFaded');
-            if (this.externalToggle) {
-              this.truncated.emit(true);
-            }
-          } else {
-            entry.classList.remove('truncated');
-            entry.classList.add('removeFaded');
-            if (this.externalToggle) {
-              this.truncated.emit(false);
-            }
-          }
-        }
-      } else {
-        entry.classList.remove('truncated');
-        entry.classList.add('removeFaded');
+  if (this.showToggle || this.externalToggle) {
+    const entry = this.content.nativeElement;
+
+    if (entry.scrollHeight > entry.offsetHeight) {
+      entry.classList.add('truncated');
+      entry.classList.remove('removeFaded');
+      if (this.externalToggle) {
+        this.truncated.emit(true);
+      }
+    } else {
+      entry.classList.remove('truncated');
+      entry.classList.add('removeFaded');
+      if (this.externalToggle) {
+        this.truncated.emit(false);
       }
     }
   }
+}
 
   /**
    * Indicates if the content is expanded, button state is 'Collapse'
    */
   public get isExpanded() {
-    return this.expand && this.expandable;
+    return this.expand;
   }
 
   /**
@@ -181,7 +160,6 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes
   toggleWithoutId(expand: boolean) {
     this.expand = expand;
     this.lines = expand ? 'none' : (this.minLines ? this.minLines.toString() : '1');
-    this.expandable = !this.expandable;
   }
 
   /**