From e933f420efa1009351af7c60b84ecfb0741603fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Sun, 27 Oct 2024 00:12:10 +0800
Subject: [PATCH] fix(Select): fix render when using virtual scroll with custom
 label (#4677)

* fix(Select): fix label render when using virtual scroll with custom label

* chore: fix before unmount

* fix(select): fix filterable behavior when pressing enter

* chore: comment
---
 src/select-input/select-input.tsx      | 2 +-
 src/select/hooks/useKeyboardControl.ts | 2 +-
 src/select/option.tsx                  | 3 ---
 src/select/select-panel.tsx            | 2 +-
 src/select/select.tsx                  | 4 +++-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx
index 21ea08c7ad..b87c5fca58 100644
--- a/src/select-input/select-input.tsx
+++ b/src/select-input/select-input.tsx
@@ -86,7 +86,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      selectInputRef.value.removeEventListener('keydown', addKeyboardEventListener);
+      selectInputRef.value?.removeEventListener('keydown', addKeyboardEventListener);
     });
 
     const onOverlayClick: PopupProps['onOverlayClick'] = (ctx) => {
diff --git a/src/select/hooks/useKeyboardControl.ts b/src/select/hooks/useKeyboardControl.ts
index a789f7ac19..3c9a9bb3ca 100644
--- a/src/select/hooks/useKeyboardControl.ts
+++ b/src/select/hooks/useKeyboardControl.ts
@@ -136,7 +136,7 @@ export default function useKeyboardControl({
   watch(hoverIndex, (index) => {
     const optionHeight = selectPanelRef.value?.innerRef?.querySelector(
       `.${classPrefix.value}-select-option`,
-    ).clientHeight;
+    )?.clientHeight;
 
     const scrollHeight = optionHeight * index;
 
diff --git a/src/select/option.tsx b/src/select/option.tsx
index 847bc76b9c..8757129b33 100644
--- a/src/select/option.tsx
+++ b/src/select/option.tsx
@@ -124,9 +124,6 @@ export default defineComponent({
         trigger: val ? 'check' : 'uncheck',
         e: context.e,
       });
-      if (!selectProvider.value.reserveKeyword) {
-        selectProvider.value.handlerInputChange('');
-      }
     };
 
     const renderTitle = () => {
diff --git a/src/select/select-panel.tsx b/src/select/select-panel.tsx
index 5b1b7372bf..0bcd81ee8c 100644
--- a/src/select/select-panel.tsx
+++ b/src/select/select-panel.tsx
@@ -81,7 +81,7 @@ export default defineComponent({
                       scrollType: props.scroll?.type,
                       isVirtual: isVirtual.value,
                       bufferSize: props.scroll?.bufferSize,
-                      key: `${item.$index || ''}_${index}`,
+                      key: `${item.$index || ''}_${index}_${item.value}`,
                     }
                   : {
                       key: `${index}_${item.value}`,
diff --git a/src/select/select.tsx b/src/select/select.tsx
index 8ac255ce30..de91b60450 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -87,6 +87,7 @@ export default defineComponent({
         newVal = props.multiple ? (newVal as SelectValue[]).map((val) => getOption(val)) : getOption(newVal);
       }
       if (newVal === orgValue.value) return;
+      if (props.multiple && !props.reserveKeyword) setInputValue('');
       setOrgValue(newVal, {
         selectedOptions: getSelectedOptions(newVal),
         ...context,
@@ -167,7 +168,8 @@ export default defineComponent({
     const handleCreate = () => {
       if (!innerInputValue.value) return;
       props.onCreate?.(innerInputValue.value);
-      setInputValue('');
+      // only clean input value when reopen popup
+      if (!innerPopupVisible.value) setInputValue('');
     };
 
     const popupContentRef = computed(() => selectInputRef.value?.popupRef.getOverlay() as HTMLElement);