fix: select focus logic #3099

components/vc-select/hooks/useDelayReset.ts

@@ -1,4 +1,4 @@
-import { onBeforeUpdate, Ref, ref } from 'vue';
+import { onMounted, Ref, ref } from 'vue';
 
 /**
  * Similar with `useLock`, but this hook will always execute last value.
@@ -14,12 +14,11 @@ export default function useDelayReset(
     window.clearTimeout(delay);
   };
 
-  onBeforeUpdate(() => {
+  onMounted(() => {
     cancelLatest();
   });
   const delaySetBool = (value: boolean, callback: () => void) => {
     cancelLatest();
-
     delay = window.setTimeout(() => {
       bool.value = value;
       if (callback) {

components/vc-select/utils/valueUtil.ts

@@ -1,5 +1,5 @@
 import { warning } from '../../vc-util/warning';
-import { VNodeChild } from 'vue';
+import { isVNode, VNodeChild } from 'vue';
 import {
   OptionsType as SelectOptionsType,
   OptionData,
@@ -163,7 +163,15 @@ export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
 };
 
 function toRawString(content: VNodeChild): string {
-  return toArray(content).join('');
+  return toArray(content)
+    .map(item => {
+      if (isVNode(item)) {
+        return item?.el?.innerText || item?.el?.wholeText;
+      } else {
+        return '';
+      }
+    })
+    .join('');
 }
 
 /** Filter single option if match the search text */
@@ -177,7 +185,6 @@ function getFilterFunction(optionFilterProp: string) {
         .toLowerCase()
         .includes(lowerSearchText);
     }
-
     // Option value search
     const rawValue = option[optionFilterProp];
     const value = toRawString(rawValue).toLowerCase();