From 8033c7c5ea3ea313cac9554686f9efbea751a540 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Sat, 22 Jan 2022 10:39:35 +0800
Subject: [PATCH] fix(components): [infinite-scroll] Infinite scroll (#5393)

---
 .../__tests__/infinite-scroll.spec.ts         | 36 ++++++++++++++++++-
 .../components/infinite-scroll/src/index.ts   | 11 +++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/components/infinite-scroll/__tests__/infinite-scroll.spec.ts b/packages/components/infinite-scroll/__tests__/infinite-scroll.spec.ts
index 3a8ad3e6b3..099a84fd80 100644
--- a/packages/components/infinite-scroll/__tests__/infinite-scroll.spec.ts
+++ b/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)
+  })
 })
diff --git a/packages/components/infinite-scroll/src/index.ts b/packages/components/infinite-scroll/src/index.ts
index 58daddd5e8..7826819eee 100644
--- a/packages/components/infinite-scroll/src/index.ts
+++ b/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