From 850efa33c9a59e42ea1df19613717bdf9aaa2dc6 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Tue, 13 Dec 2022 17:58:41 +0100 Subject: [PATCH] fix(useActiveElement): ignore blur for relatedTarget 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 `` in between. --- packages/core/useActiveElement/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/core/useActiveElement/index.ts b/packages/core/useActiveElement/index.ts index 4a9d514cb24..62e0983a8f7 100644 --- a/packages/core/useActiveElement/index.ts +++ b/packages/core/useActiveElement/index.ts @@ -17,7 +17,12 @@ export function useActiveElement(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) }