fix(shared): disconnect ResizeObserver on unmount in useSize (#2693)

zernonia · claude · web-flow · commit 4223cf02a963 · 2026-06-11T13:16:47.000+08:00
Hoist the ResizeObserver out of the onMounted callback and disconnect it
in onUnmounted, fixing a leak where observers accumulated on every
mount/unmount cycle of floating components (Select, Tooltip, Popover, etc.).
Adds useSize.test.ts with three tests covering cleanup, initial-size, and
null-element paths. Also replaces innerHTML with textContent in the
Splitter cursor-style helper.

Co-authored-by: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/src/Splitter/utils/style.ts b/packages/core/src/Splitter/utils/style.ts
@@ -85,7 +85,7 @@ export function setGlobalCursorStyle(
     document.head.appendChild(styleElement)
   }
 
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`
+  styleElement.textContent = `*{cursor: ${style}!important;}`
 }
 
 // the % of the group's overall space this panel should occupy.
diff --git a/packages/core/src/shared/useSize.test.ts b/packages/core/src/shared/useSize.test.ts
@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+import { useSize } from './useSize'
+
+describe('useSize', () => {
+  let observeMock: ReturnType<typeof vi.fn>
+  let disconnectMock: ReturnType<typeof vi.fn>
+  let MockResizeObserver: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    observeMock = vi.fn()
+    disconnectMock = vi.fn()
+    const _observeMock = observeMock
+    const _disconnectMock = disconnectMock
+    // Must be a real class so `new ResizeObserver(...)` works
+    MockResizeObserver = vi.fn(function (this: ResizeObserver) {
+      this.observe = _observeMock
+      this.unobserve = vi.fn()
+      this.disconnect = _disconnectMock
+    }) as unknown as ReturnType<typeof vi.fn>
+    globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
+  })
+
+  it('disconnects the observer on unmount', async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const elRef = ref<HTMLElement | null>(null)
+        const { width, height } = useSize(elRef)
+        return { elRef, width, height }
+      },
+      render() {
+        return h('div', { ref: 'elRef' })
+      },
+    })
+
+    const wrapper = mount(TestComponent, { attachTo: document.body })
+
+    expect(observeMock).toHaveBeenCalledTimes(1)
+    expect(disconnectMock).toHaveBeenCalledTimes(0)
+
+    wrapper.unmount()
+
+    expect(disconnectMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('sets initial size from offsetWidth/offsetHeight on mount', async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const elRef = ref<HTMLElement | null>(null)
+        const { width, height } = useSize(elRef)
+        return { elRef, width, height }
+      },
+      render() {
+        return h('div', { ref: 'elRef' })
+      },
+    })
+
+    const wrapper = mount(TestComponent, { attachTo: document.body })
+
+    // jsdom returns 0 for offsetWidth/offsetHeight — assert they are numbers
+    expect(typeof wrapper.vm.width).toBe('number')
+    expect(typeof wrapper.vm.height).toBe('number')
+    expect(wrapper.vm.width).toBe(0)
+    expect(wrapper.vm.height).toBe(0)
+
+    wrapper.unmount()
+  })
+
+  it('does not create an observer when element is null', async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const elRef = ref<HTMLElement | null>(null)
+        const { width, height } = useSize(elRef)
+        return { elRef, width, height }
+      },
+      // render with no element bound to elRef — it stays null
+      render() {
+        return h('span')
+      },
+    })
+
+    const wrapper = mount(TestComponent, { attachTo: document.body })
+
+    expect(observeMock).not.toHaveBeenCalled()
+
+    // unmount should not throw even though no observer was created
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+})
diff --git a/packages/core/src/shared/useSize.ts b/packages/core/src/shared/useSize.ts
@@ -1,19 +1,21 @@
 import type { MaybeElementRef } from '@vueuse/core'
 import { unrefElement } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 export function useSize(element: MaybeElementRef) {
   const size = ref<{ width: number, height: number }>()
   const width = computed(() => size.value?.width ?? 0)
   const height = computed(() => size.value?.height ?? 0)
 
+  let resizeObserver: ResizeObserver | undefined
+
   onMounted(() => {
     const el = unrefElement(element) as HTMLElement
     if (el) {
       // provide size as early as possible
       size.value = { width: el.offsetWidth, height: el.offsetHeight }
 
-      const resizeObserver = new ResizeObserver((entries) => {
+      resizeObserver = new ResizeObserver((entries) => {
         if (!Array.isArray(entries))
           return
 
@@ -47,8 +49,6 @@ export function useSize(element: MaybeElementRef) {
       })
 
       resizeObserver.observe(el, { box: 'border-box' })
-
-      return () => resizeObserver.unobserve(el)
     }
     else {
       // We only want to reset to `undefined` when the element becomes `null`,
@@ -57,6 +57,11 @@ export function useSize(element: MaybeElementRef) {
     }
   })
 
+  onUnmounted(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+  })
+
   return {
     width,
     height,

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export function setGlobalCursorStyle(`
`85`	`85`	`document.head.appendChild(styleElement)`
`86`	`86`	`}`
`87`	`87`
`88`		- styleElement.innerHTML = `*{cursor: ${style}!important;}`
	`88`	+ styleElement.textContent = `*{cursor: ${style}!important;}`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`// the % of the group's overall space this panel should occupy.`