diff --git a/packages/core/useElementVisibility/index.test.ts b/packages/core/useElementVisibility/index.test.ts index 5e0f4a08984..00f867a6d00 100644 --- a/packages/core/useElementVisibility/index.test.ts +++ b/packages/core/useElementVisibility/index.test.ts @@ -19,6 +19,12 @@ describe('useElementVisibility', () => { expect(visible.value).toBeFalsy() }) + it('should work when threshold is undefined', () => { + // @ts-expect-error set threshold null + const visible = useElementVisibility(el, { threshold: null }) + expect(visible.value).toBeFalsy() + }) + describe('when internally using useIntersectionObserver', async () => { beforeAll(() => { vi.resetAllMocks() diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts index 8be9a3f1c6a..1ff9eee380c 100644 --- a/packages/core/useElementVisibility/index.ts +++ b/packages/core/useElementVisibility/index.ts @@ -1,11 +1,12 @@ import type { MaybeRefOrGetter } from '@vueuse/shared' import { ref } from 'vue-demi' import type { MaybeComputedElementRef } from '../unrefElement' +import type { UseIntersectionObserverOptions } from '../useIntersectionObserver' import { useIntersectionObserver } from '../useIntersectionObserver' import type { ConfigurableWindow } from '../_configurable' import { defaultWindow } from '../_configurable' -export interface UseElementVisibilityOptions extends ConfigurableWindow { +export interface UseElementVisibilityOptions extends ConfigurableWindow, Pick { scrollTarget?: MaybeRefOrGetter } @@ -18,7 +19,7 @@ export function useElementVisibility( element: MaybeComputedElementRef, options: UseElementVisibilityOptions = {}, ) { - const { window = defaultWindow, scrollTarget } = options + const { window = defaultWindow, scrollTarget, threshold = 0 } = options const elementIsVisible = ref(false) useIntersectionObserver( @@ -39,7 +40,7 @@ export function useElementVisibility( { root: scrollTarget, window, - threshold: 0, + threshold, }, )