From b0c6022f8bf113a36880fc6310c03a5d4f08dfb3 Mon Sep 17 00:00:00 2001
From: Anton Lazarev <anton.lazarev@ebury.com>
Date: Fri, 5 Apr 2024 12:17:32 +0100
Subject: [PATCH] [CHUX-295] Force ec-modal to trap focus (#1910)

---
 package-lock.json                        |  4 ++--
 package.json                             |  2 +-
 src/components/ec-modal/ec-modal.spec.ts | 16 ++++++++++++++++
 src/components/ec-modal/ec-modal.vue     |  5 ++++-
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7d4a5f51..542939c75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.8.1",
+      "version": "2.8.2",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index fbf399ff3..4fa1c7f7b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-modal/ec-modal.spec.ts b/src/components/ec-modal/ec-modal.spec.ts
index 552f3f90d..4c7cd1eba 100644
--- a/src/components/ec-modal/ec-modal.spec.ts
+++ b/src/components/ec-modal/ec-modal.spec.ts
@@ -45,6 +45,22 @@ describe('EcModal', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  it('should remove focus trap activation interval on unmount', () => {
+    const wrapper = mountModal(
+      { show: true },
+      {
+        slots: {
+          main: '<p>Before we can process your application we need you to upload your management accounts. You can do this now or leave it for later.</p>',
+        },
+      },
+    );
+
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval');
+    wrapper.unmount();
+
+    expect(clearIntervalSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should render with custom attributes', () => {
     const wrapper = mountModal({
       show: true,
diff --git a/src/components/ec-modal/ec-modal.vue b/src/components/ec-modal/ec-modal.vue
index 712d80163..73ab25caa 100644
--- a/src/components/ec-modal/ec-modal.vue
+++ b/src/components/ec-modal/ec-modal.vue
@@ -188,7 +188,9 @@ function getFocusTrapOptions(): UseFocusTrapOptions {
   return options;
 }
 
-const { deactivate } = useFocusTrap(focusTrapTarget, getFocusTrapOptions());
+const { deactivate, activate } = useFocusTrap(focusTrapTarget, getFocusTrapOptions());
+const focusTrapInterval = setInterval(() => activate(), 300);
+
 watch(() => focusTrapTarget.value, (targetEl) => {
   if (!targetEl) {
     deactivate();
@@ -219,6 +221,7 @@ function onKeyUp(e: KeyboardEvent) {
 }
 onBeforeUnmount(() => {
   document.removeEventListener('keyup', onKeyUp);
+  clearInterval(focusTrapInterval);
 });
 
 // modal footer