fix(intersect): don't unbind until the element is intersecting (#13593)

packages/vuetify/src/directives/intersect/__tests__/intersect.spec.ts

@@ -1,7 +1,7 @@
 // Directives
 import Intersect from '../'
 
-describe('resize.ts', () => {
+describe('intersect', () => {
   it('should bind event on inserted', () => {
     const callback = jest.fn()
     const el = document.createElement('div')
@@ -34,12 +34,15 @@ describe('resize.ts', () => {
       modifiers: { once: true },
     } as any)
 
-    expect(callback).toHaveBeenCalled()
+    expect(callback).toHaveBeenCalledTimes(1)
     expect((el as any)._observe).toBeTruthy()
 
-    if ((el as any)._observe) {
-      (el as any)._observe.observer.callback()
-    }
+    ;(el as any)._observe.observer.callback([{ isIntersecting: false }])
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect((el as any)._observe).toBeTruthy()
+
+    ;(el as any)._observe.observer.callback([{ isIntersecting: true }])
 
     expect(callback).toHaveBeenCalledTimes(2)
     expect((el as any)._observe).toBeFalsy()

packages/vuetify/src/directives/intersect/index.ts

@@ -29,24 +29,25 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
     /* istanbul ignore if */
     if (!el._observe) return // Just in case, should never fire
 
+    const isIntersecting = entries.some(entry => entry.isIntersecting)
+
     // If is not quiet or has already been
     // initted, invoke the user callback
     if (
       handler && (
         !modifiers.quiet ||
         el._observe.init
+      ) && (
+        !modifiers.once ||
+        isIntersecting ||
+        !el._observe.init
       )
     ) {
-      const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
-
       handler(entries, observer, isIntersecting)
     }
 
-    // If has already been initted and
-    // has the once modifier, unbind
-    if (el._observe.init && modifiers.once) unbind(el)
-    // Otherwise, mark the observer as initted
-    else (el._observe.init = true)
+    if (isIntersecting && modifiers.once) unbind(el)
+    else el._observe.init = true
   }, options)
 
   el._observe = { init: false, observer }