@kiva/kv-components 3.91.0 → 3.91.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.91.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.91.0...@kiva/kv-components@3.91.1) (2024-08-14)
+
+
+### Bug Fixes
+
+* resolve issue found in ui vue migration ([0050e5e](https://github.com/kiva/kv-ui-elements/commit/0050e5e93cf189f18fda0c468a577546f5f1911c))
+
+
+
+
+
 # [3.91.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.90.5...@kiva/kv-components@3.91.0) (2024-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.91.0",
+  "version": "3.91.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "d7a9fad77e1a68fd3d4483619c937c37a3807503"
+  "gitHead": "1a5c4e9cb95e6a1bd8fb33a423c267b6c46e570e"
 }

package/vue/KvLightbox.vue

@@ -217,16 +217,23 @@ export default {
 		const kvLightbox = ref(null);
 		const kvLightboxBody = ref(null);
 		const controlsRef = ref(null);
+		const activateFocusTrap = ref(null);
+		const deactivateFocusTrap = ref(null);
 
-		const trapElements = computed(() => [
-			kvLightbox.value, // This lightbox
-			'[role="alert"]', // Any open toasts/alerts on the page
-		]);
-		const {
-			activate: activateFocusTrap,
-			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(trapElements, {
-			allowOutsideClick: true, // allow clicking outside the lightbox to close it
+		// Ensure the lightbox ref isn't null
+		nextTick(() => {
+			const trapElements = computed(() => [
+				kvLightbox.value, // This lightbox
+				'[role="alert"]', // Any open toasts/alerts on the page
+			]);
+			const {
+				activate,
+				deactivate,
+			} = useFocusTrap(trapElements, {
+				allowOutsideClick: true, // allow clicking outside the lightbox to close it
+			});
+			activateFocusTrap.value = activate;
+			deactivateFocusTrap.value = deactivate;
 		});
 
 		let makePageInertCallback = null;
@@ -242,7 +249,7 @@ export default {
 		const hide = (closedBy = '') => {
 			// scroll any content inside the lightbox back to top
 			if (kvLightbox.value && kvLightboxBody.value) {
-				deactivateFocusTrap();
+				deactivateFocusTrap.value?.();
 				kvLightboxBody.value.scrollTop = 0;
 				unlockPrintSingleEl(kvLightboxBody.value);
 			}
@@ -279,7 +286,7 @@ export default {
 
 				nextTick(() => {
 					if (kvLightbox.value && kvLightboxBody.value) {
-						activateFocusTrap();
+						activateFocusTrap.value?.();
 						makePageInertCallback = makePageInert(kvLightbox.value);
 						lockPrintSingleEl(kvLightboxBody.value);
 					}