Merge pull request #432 from ownego/fix/correct-use-of-watch-focus-manager

Fix: correct use of watch in useFocusManager.ts

Author: juzser

src/use/useFocusManager.ts

@@ -4,7 +4,7 @@ import {
   inject,
   ref,
   computed,
-  watchEffect,
+  watch,
   onUnmounted,
 } from 'vue';
 
@@ -33,13 +33,17 @@ export function useFocusManager({ trapping }: Options) {
 
   const canSafelyFocus = computed(() => trapFocusList.value[0] === String(id));
 
-  watchEffect(() => {
-    if (!trapping) {
-      return;
-    }
-
-    addFocusItem(String(id));
-  });
+  watch(
+    () => [trapping, id],
+    ([newTrappingVal, newId]) => {
+      if (!newTrappingVal) {
+        return;
+      }
+
+      addFocusItem(String(newId));
+    },
+    { immediate: true }
+  );
 
   onUnmounted(() => {
     removeFocusItem(String(id));