From cadc24073d17e64d0d19556fafc0d80dba9da084 Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Tue, 30 Apr 2024 12:13:00 -0400
Subject: [PATCH] fix(design): remove overflow style on destroy of
 sidebar-viewport (#2779)

---
 .../sidebar-viewport.component.ts             | 11 +++-
 .../sidebar-viewport/specs/destroy.spec.ts    | 59 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 libs/design/sidebar/src/sidebar-viewport/specs/destroy.spec.ts

diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
index 9dfdaa4bcb..38410a46a4 100644
--- a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
+++ b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts
@@ -14,6 +14,7 @@ import {
   Inject,
   SkipSelf,
   Optional,
+  OnDestroy,
 } from '@angular/core';
 
 import { hasParentViewport } from './helper/has-parent-viewport';
@@ -74,7 +75,7 @@ import { DaffSidebarComponent } from '../sidebar/sidebar.component';
     { provide: DAFF_SIDEBAR_SCROLL_TOKEN, useFactory: daffSidebarViewportScrollFactory },
   ],
 })
-export class DaffSidebarViewportComponent implements AfterContentChecked {
+export class DaffSidebarViewportComponent implements AfterContentChecked, OnDestroy {
   @HostBinding('class.daff-sidebar-viewport') hostClass = true;
 
   @HostBinding('class') get classes() {
@@ -208,6 +209,14 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
     }
   }
 
+  ngOnDestroy() {
+    if(!this.parentViewport && !hasParentViewport(this._elementRef.nativeElement)) {
+      this.bodyScroll.enable();
+    } else {
+      this.scroll.enable();
+    }
+  }
+
   /**
    * @docs-private
    *
diff --git a/libs/design/sidebar/src/sidebar-viewport/specs/destroy.spec.ts b/libs/design/sidebar/src/sidebar-viewport/specs/destroy.spec.ts
new file mode 100644
index 0000000000..e6198331b2
--- /dev/null
+++ b/libs/design/sidebar/src/sidebar-viewport/specs/destroy.spec.ts
@@ -0,0 +1,59 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import { DOCUMENT } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DaffSidebarViewportComponent } from './../sidebar-viewport.component';
+import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
+
+@Component({
+  template: `
+	<daff-sidebar-viewport>
+		<daff-sidebar side="left" mode="over" [open]="true"></daff-sidebar>
+	</daff-sidebar-viewport>
+	`,
+})
+
+class WrapperOneComponent {}
+
+describe('@daffodil/design/sidebar | DaffSidebarViewportComponent | On Destroy', () => {
+  let fixture: ComponentFixture<WrapperOneComponent>;
+  let component: WrapperOneComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        A11yModule,
+      ],
+      declarations: [
+        DaffSidebarViewportComponent,
+        DaffSidebarComponent,
+        WrapperOneComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperOneComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not have `overflow: hidden` on the body when destroyed', () => {
+    fixture.destroy();
+
+    expect((TestBed.inject(DOCUMENT)).body.style.overflow).not.toEqual('hidden');
+  });
+});