fix(useElementVisibility): use last intersection entry (#3365)

Co-authored-by: Mateusz Zieliński <mateusz.zielinski@spartez-software.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vueuse · Dec 4, 2023 · 07d3985 · 07d3985
1 parent 9c72d5c
commit 07d3985
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/packages/core/useElementVisibility/index.test.ts b/packages/core/useElementVisibility/index.test.ts
@@ -41,7 +41,7 @@ describe('useElementVisibility', () => {
     it('passes a callback to useIntersectionObserver that sets visibility to false only when isIntersecting is false', () => {
       const isVisible = useElementVisibility(el)
       const callback = vi.mocked(useIntersectionObserver).mock.lastCall?.[1]
-      const callMockCallbackWithIsIntersectingValue = (isIntersecting: boolean) => callback?.([{ isIntersecting } as IntersectionObserverEntry], {} as IntersectionObserver)
+      const callMockCallbackWithIsIntersectingValue = (isIntersecting: boolean) => callback?.([{ isIntersecting, time: 1 } as IntersectionObserverEntry], {} as IntersectionObserver)
 
       // It should be false initially
       expect(isVisible.value).toBe(false)
@@ -59,6 +59,34 @@ describe('useElementVisibility', () => {
       expect(isVisible.value).toBe(false)
     })
 
+    it('uses the latest version of isIntersecting when multiple intersection entries are given', () => {
+      const isVisible = useElementVisibility(el)
+      const callback = vi.mocked(useIntersectionObserver).mock.lastCall?.[1]
+      const callMockCallbackWithIsIntersectingValues = (...entries: { isIntersecting: boolean; time: number }[]) => {
+        callback?.(entries as IntersectionObserverEntry[], {} as IntersectionObserver)
+      }
+
+      // It should be false initially
+      expect(isVisible.value).toBe(false)
+
+      // It should take the latest value of isIntersecting
+      callMockCallbackWithIsIntersectingValues(
+        { isIntersecting: false, time: 1 },
+        { isIntersecting: false, time: 2 },
+        { isIntersecting: true, time: 3 },
+      )
+      expect(isVisible.value).toBe(true)
+
+      // It should take the latest even when entries are out of order
+      callMockCallbackWithIsIntersectingValues(
+        { isIntersecting: true, time: 1 },
+        { isIntersecting: false, time: 3 },
+        { isIntersecting: true, time: 2 },
+      )
+
+      expect(isVisible.value).toBe(false)
+    })
+
     it('passes the given window to useIntersectionObserver', () => {
       const mockWindow = {} as Window
 

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
@@ -23,7 +23,17 @@ export function useElementVisibility(
 
   useIntersectionObserver(
     element,
-    ([{ isIntersecting }]) => {
+    (intersectionObserverEntries) => {
+      let isIntersecting = elementIsVisible.value
+
+      // Get the latest value of isIntersecting based on the entry time
+      let latestTime = 0
+      for (const entry of intersectionObserverEntries) {
+        if (entry.time >= latestTime) {
+          latestTime = entry.time
+          isIntersecting = entry.isIntersecting
+        }
+      }
       elementIsVisible.value = isIntersecting
     },
     {