From 88b4419a43e8f6b6c70c4288163ff538756fe490 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Fri, 16 Dec 2022 16:27:25 +0100 Subject: [PATCH] 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 `` 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) }