From 8edf023a0014747758b193c411b285baa11f05de Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 21 Feb 2023 15:40:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20select=E4=B8=8B=E6=8B=89=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=88=86=E9=A1=B5=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/fields/Select.vue | 48 +++++++++++++++++------------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index fe30afde..2686faef 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup name="MFormSelect">
-import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
+import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
 
@@ -331,26 +331,36 @@ if (typeof props.config.options === 'function') {
   });
 }
 
-props.config.remote &&
-  onMounted(async () => {
-    await nextTick();
-    tMagicSelect.value?.scrollbarWrap?.addEventListener('scroll', async (e: Event) => {
-      const el = e.currentTarget as HTMLDivElement;
-      if (moreLoadingVisible.value) {
+if (props.config.remote) {
+  const unWacth = watch(
+    () => tMagicSelect.value?.scrollbarWrap,
+    (scrollbarWrap) => {
+      if (!scrollbarWrap) {
         return;
       }
-      if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) {
-        return;
-      }
-      if (total.value <= options.value.length) {
-        return;
-      }
-      moreLoadingVisible.value = true;
-      pgIndex.value += 1;
-      options.value = await getOptions();
-      moreLoadingVisible.value = false;
-    });
-  });
+      scrollbarWrap.addEventListener('scroll', async (e: Event) => {
+        const el = e.currentTarget as HTMLDivElement;
+        if (moreLoadingVisible.value) {
+          return;
+        }
+        if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) {
+          return;
+        }
+        if (total.value <= options.value.length) {
+          return;
+        }
+        moreLoadingVisible.value = true;
+        pgIndex.value += 1;
+        options.value = await getOptions();
+        moreLoadingVisible.value = false;
+      });
+      unWacth();
+    },
+    {
+      immediate: true,
+    },
+  );
+}
 
 const popperClass = mForm?.popperClass;