diff --git a/packages/ui/src/composables/useResizeObserver.ts b/packages/ui/src/composables/useResizeObserver.ts index 75dbbda1c9..3b2f2084fd 100644 --- a/packages/ui/src/composables/useResizeObserver.ts +++ b/packages/ui/src/composables/useResizeObserver.ts @@ -4,21 +4,35 @@ type MaybeRef = T | Ref type MaybeArray = T | T[] const normalizeElements = (elements: MaybeRef[] | Ref>) => { - return Array.isArray(elements) - ? elements - : Array.isArray(elements.value) - ? elements.value - : [unref(elements)] as T[] + if (Array.isArray(elements)) { + return elements.map(unref) + } + + const unrefArray = unref(elements) + + return Array.isArray(unrefArray) ? unrefArray : [unrefArray] } export const useResizeObserver = (elementsList: MaybeRef[] | Ref>, cb: ResizeObserverCallback) => { let resizeObserver: ResizeObserver | undefined - const observeAll = (elementsList: MaybeRef[]) => { - elementsList.forEach((element: MaybeRef) => { - const unrefedElement = unref(element) + const observeAll = (elements: MaybeRef[]) => { + elements.forEach((element: MaybeRef) => { + const unrefElement = unref(element) + + if (!unrefElement) { + return + } + + if (!(unrefElement instanceof Element)) { + console.error('Vuestic: Trying to observe non-HTMLElement', { + target: unrefElement, + array: elementsList, + }) + throw new Error('Vuestic: Unable to observe non-HTMLElement') + } - unrefedElement && resizeObserver?.observe(unrefedElement) + unrefElement && resizeObserver?.observe(unrefElement) }) }