From 489dbecd5d19c31089c8e821ae84f03d2cc4a551 Mon Sep 17 00:00:00 2001
From: louiseliang <louise.liang@cultureamp.com>
Date: Wed, 21 Feb 2024 14:18:13 +1100
Subject: [PATCH 1/2] fix: unscrollable layer remains when modal is unmounted

---
 .changeset/fluffy-spies-thank.md                       |  5 +++++
 .../components/src/Modal/GenericModal/GenericModal.tsx | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fluffy-spies-thank.md

diff --git a/.changeset/fluffy-spies-thank.md b/.changeset/fluffy-spies-thank.md
new file mode 100644
index 00000000000..72791b69523
--- /dev/null
+++ b/.changeset/fluffy-spies-thank.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix the unscrollable problem when a modal is unmounted after confirmation
diff --git a/packages/components/src/Modal/GenericModal/GenericModal.tsx b/packages/components/src/Modal/GenericModal/GenericModal.tsx
index a205b8439bf..b785702adf2 100644
--- a/packages/components/src/Modal/GenericModal/GenericModal.tsx
+++ b/packages/components/src/Modal/GenericModal/GenericModal.tsx
@@ -1,4 +1,4 @@
-import React, { useId, useState } from "react"
+import React, { useEffect, useId, useState } from "react"
 import { createPortal } from "react-dom"
 import { Transition } from "@headlessui/react"
 import FocusLock from "react-focus-lock"
@@ -102,7 +102,7 @@ export const GenericModal = ({
     }
   }
 
-  const onAfterLeaveHandler = (): void => {
+  const cleanUpAfterClose = (): void => {
     document.documentElement.classList.remove(
       styles.unscrollable,
       styles.pseudoScrollbar
@@ -111,7 +111,13 @@ export const GenericModal = ({
     if (onEscapeKeyup) {
       document.removeEventListener("keyup", onEscapeKeyup)
     }
+  }
 
+  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
+  useEffect(() => () => cleanUpAfterClose(), [])
+
+  const onAfterLeaveHandler = (): void => {
+    cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
 

From 927054b6e6c673b8a2f6081bde597c3cca49ff82 Mon Sep 17 00:00:00 2001
From: Doug MacKenzie <doug.mackenzie@cultureamp.com>
Date: Wed, 21 Feb 2024 15:35:41 +1100
Subject: [PATCH 2/2] Reword changeset

---
 .changeset/fluffy-spies-thank.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/fluffy-spies-thank.md b/.changeset/fluffy-spies-thank.md
index 72791b69523..8bd50e6ffa8 100644
--- a/.changeset/fluffy-spies-thank.md
+++ b/.changeset/fluffy-spies-thank.md
@@ -2,4 +2,6 @@
 "@kaizen/components": patch
 ---
 
-Fix the unscrollable problem when a modal is unmounted after confirmation
+Bug fix for modals: ensure clean up runs when the modal is unmounted.
+
+This bug created unscrollable pages if the modal was removed from the DOM before its `onAfterLeave` callback was able to run.