diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index e3710f3a8b..c6a6f6aa72 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix memory leak in `Popover` component ([#2430](https://github.com/tailwindlabs/headlessui/pull/2430)) ## [1.7.13] - 2023-04-12 diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts index eb7d94830f..8a19b91c4d 100644 --- a/packages/@headlessui-vue/src/components/popover/popover.ts +++ b/packages/@headlessui-vue/src/components/popover/popover.ts @@ -380,6 +380,37 @@ export let PopoverButton = defineComponent({ event.stopPropagation() } + let direction = useTabDirection() + function handleFocus() { + let el = dom(api.panel) as HTMLElement + if (!el) return + + function run() { + let result = match(direction.value, { + [TabDirection.Forwards]: () => focusIn(el, Focus.First), + [TabDirection.Backwards]: () => focusIn(el, Focus.Last), + }) + + if (result === FocusResult.Error) { + focusIn( + getFocusableElements().filter((el) => el.dataset.headlessuiFocusGuard !== 'true'), + match(direction.value, { + [TabDirection.Forwards]: Focus.Next, + [TabDirection.Backwards]: Focus.Previous, + }), + { relativeTo: dom(api.button) } + ) + } + } + + // TODO: Cleanup once we are using real browser tests + if (process.env.NODE_ENV === 'test') { + microTask(run) + } else { + run() + } + } + return () => { let visible = api.popoverState.value === PopoverStates.Open let slot = { open: visible } @@ -406,37 +437,6 @@ export let PopoverButton = defineComponent({ onMousedown: handleMouseDown, } - let direction = useTabDirection() - function handleFocus() { - let el = dom(api.panel) as HTMLElement - if (!el) return - - function run() { - let result = match(direction.value, { - [TabDirection.Forwards]: () => focusIn(el, Focus.First), - [TabDirection.Backwards]: () => focusIn(el, Focus.Last), - }) - - if (result === FocusResult.Error) { - focusIn( - getFocusableElements().filter((el) => el.dataset.headlessuiFocusGuard !== 'true'), - match(direction.value, { - [TabDirection.Forwards]: Focus.Next, - [TabDirection.Backwards]: Focus.Previous, - }), - { relativeTo: dom(api.button) } - ) - } - } - - // TODO: Cleanup once we are using real browser tests - if (process.env.NODE_ENV === 'test') { - microTask(run) - } else { - run() - } - } - return h(Fragment, [ render({ ourProps,