fix(useActiveElement): ignore blur for relatedTarget (#2540)

If a blur event has a `relatedTarget` that element will receive focus. For the short time between blur and focus the `document.activeElement` will be the body element. By ignoring the blur event here we simply wait for the computedWithControl to be triggered by the focus event that will follow as we know. By then the new element will have focus. By doing this we prevent e.g. that stuff will be triggered that depends on the activeElement being inside a specific element. E.g. `useFocusWithin` will profit from this, since the focus will not be reset to `<body>` in between.
vueuse · Dec 16, 2022 · 88b4419 · 88b4419
1 parent c91867f
commit 88b4419
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/core/useActiveElement/index.ts b/packages/core/useActiveElement/index.ts
@@ -17,7 +17,12 @@ export function useActiveElement<T extends HTMLElement>(options: ConfigurableWin
   )
 
   if (window) {
-    useEventListener(window, 'blur', activeElement.trigger, true)
+    useEventListener(window, 'blur', (event) => {
+      if (event.relatedTarget === null)
+        return
+
+      activeElement.trigger()
+    }, true)
     useEventListener(window, 'focus', activeElement.trigger, true)
   }