fix(components): [infinite-scroll] Infinite scroll (#5393)

packages/components/infinite-scroll/__tests__/infinite-scroll.spec.ts

@@ -22,7 +22,7 @@ const _mount = (options: Record<string, unknown>) =>
     {
       ...options,
       template: `
-    <ul v-infinite-scroll="load" ${options.extraAttrs}>
+    <ul v-infinite-scroll="load" ${options.extraAttrs} ref="ulRef">
       <li
         v-for="i in count"
         :key="i"
@@ -200,4 +200,38 @@ describe('InfiniteScroll', () => {
     await makeScroll(documentElement, 'scrollTop', 0)
     expect(countListItem(wrapper)).toBe(INITIAL_VALUE + 1)
   })
+
+  test('callback will not be triggered infinitely', async () => {
+    const restoreClientHeight = defineGetter(
+      window.HTMLElement.prototype,
+      'clientHeight',
+      0,
+      CONTAINER_HEIGHT
+    )
+    const restoreScrollHeight = defineGetter(
+      window.HTMLElement.prototype,
+      'scrollHeight',
+      0,
+      function () {
+        return (
+          Array.from(this.getElementsByClassName(LIST_ITEM_CLASS)).length *
+          ITEM_HEIGHT
+        )
+      }
+    )
+    const wrapper = _mount({
+      extraAttrs: `style="${CONTAINER_STYLE}"`,
+      setup,
+    })
+
+    await tick(INITIAL_TICK)
+    expect(countListItem(wrapper)).toBe(0)
+
+    restoreClientHeight()
+    restoreScrollHeight()
+
+    wrapper.vm.$refs.ulRef.ElInfiniteScroll.instance.count++
+    await nextTick()
+    expect(countListItem(wrapper)).toBe(INITIAL_VALUE)
+  })
 })

packages/components/infinite-scroll/src/index.ts

@@ -106,7 +106,7 @@ function checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {
   const { containerEl, instance } = el[SCOPE]
   const { disabled } = getScrollOptions(el, instance)
 
-  if (disabled) return
+  if (disabled || containerEl.clientHeight === 0) return
 
   if (containerEl.scrollHeight <= containerEl.clientHeight) {
     cb.call(instance)
@@ -166,6 +166,15 @@ const InfiniteScroll: ObjectDirective<
     container?.removeEventListener('scroll', onScroll)
     destroyObserver(el)
   },
+  async updated(el) {
+    if (!el[SCOPE]) {
+      await nextTick()
+    }
+    const { containerEl, cb, observer } = el[SCOPE]
+    if (containerEl.clientHeight && observer) {
+      checkFull(el, cb)
+    }
+  },
 }
 
 export default InfiniteScroll