From 481a0153be1d3458dd0ba367063b22951aee24e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Sun, 17 Nov 2024 05:31:38 +0800
Subject: [PATCH 1/7] feat(Select): `collapsibleItems` params expanded options

---
 src/select-input/interface.ts     |  8 ++++++++
 src/select-input/select-input.tsx | 11 +++++++++--
 src/select-input/useMultiple.tsx  |  7 ++++---
 src/select/_example/collapsed.vue | 26 +++++++++++++-------------
 src/select/select.tsx             |  1 +
 src/tag-input/interface.ts        |  4 +++-
 src/tag-input/tag-input.tsx       | 12 ++++++++++--
 src/tag-input/useTagList.tsx      |  4 +++-
 8 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/select-input/interface.ts b/src/select-input/interface.ts
index dd95eb87f6..33c74d5673 100644
--- a/src/select-input/interface.ts
+++ b/src/select-input/interface.ts
@@ -1,4 +1,5 @@
 import { TdSelectInputProps } from './type';
+import { PropType } from 'vue';
 
 export interface SelectInputCommonProperties {
   autofocus?: TdSelectInputProps['autofocus'];
@@ -18,3 +19,10 @@ export interface SelectInputCommonProperties {
   onMouseenter?: TdSelectInputProps['onMouseenter'];
   onMouseleave?: TdSelectInputProps['onMouseleave'];
 }
+
+export interface SelectInputProps extends TdSelectInputProps {
+  /**
+   * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+   */
+  options: any[];
+}
diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx
index b87c5fca58..6037cb7d64 100644
--- a/src/select-input/select-input.tsx
+++ b/src/select-input/select-input.tsx
@@ -1,12 +1,13 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, SetupContext, toRefs, watch } from 'vue';
 import Popup, { PopupInstanceFunctions, PopupProps, PopupVisibleChangeContext } from '../popup';
 import props from './props';
-import { TdSelectInputProps } from './type';
+import type { TdSelectInputProps } from './type';
 import useSingle, { SelectInputValueDisplayOptions } from './useSingle';
 import useMultiple from './useMultiple';
 import useOverlayInnerStyle from './useOverlayInnerStyle';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks';
+import type { SelectInputProps } from './interface';
 
 const useComponentClassName = () => {
   return {
@@ -32,9 +33,15 @@ export default defineComponent({
     valueDisplayOptions: {
       type: Object as PropType<SelectInputValueDisplayOptions>,
     },
+    /**
+     * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+     */
+    options: {
+      type: Array as PropType<any[]>,
+    },
   },
 
-  setup(props: TdSelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext) {
+  setup(props: SelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext) {
     const { NAME_CLASS, BASE_CLASS_BORDERLESS, BASE_CLASS_MULTIPLE, BASE_CLASS_POPUP_VISIBLE, BASE_CLASS_EMPTY } =
       useComponentClassName();
     const classPrefix = usePrefixClass();
diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
index 45bc18ecce..e6c4a9faac 100644
--- a/src/select-input/useMultiple.tsx
+++ b/src/select-input/useMultiple.tsx
@@ -1,7 +1,7 @@
 import { SetupContext, computed, ref, toRefs, Ref } from 'vue';
 import isObject from 'lodash/isObject';
-import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from './type';
-import { SelectInputCommonProperties } from './interface';
+import type { SelectInputChangeContext, SelectInputKeys } from './type';
+import type { SelectInputCommonProperties, SelectInputProps } from './interface';
 import TagInput, { TagInputValue, TagInputProps } from '../tag-input';
 import Loading from '../loading';
 import useDefault from '../hooks/useDefaultValue';
@@ -23,7 +23,7 @@ const DEFAULT_KEYS = {
 };
 
 export default function useMultiple(
-  props: TdSelectInputProps,
+  props: SelectInputProps,
   context: SetupContext,
   popupRef: Ref<PopupInstanceFunctions>,
 ) {
@@ -99,6 +99,7 @@ export default function useMultiple(
       collapsedItems: props.collapsedItems,
       tag: props.tag,
       value: tags.value,
+      options: props.options,
       valueDisplay: props.valueDisplay,
       inputValue: p.popupVisible && p.allowInput ? tInputValue.value : '',
       inputProps: {
diff --git a/src/select/_example/collapsed.vue b/src/select/_example/collapsed.vue
index 788ca780b5..17e7451bb2 100644
--- a/src/select/_example/collapsed.vue
+++ b/src/select/_example/collapsed.vue
@@ -39,10 +39,10 @@
       :disabled="disabled"
       :readonly="readonly"
     >
-      <template #collapsedItems="{ value: v, onClose }">
+      <template #collapsedItems="{ collapsedSelectedItems: slotCollapsedSelectedItems, onClose }">
         <CollapsedItemsRender
           :style="{ marginRight: '4px' }"
-          :value="v"
+          :collapsed-selected-items="slotCollapsedSelectedItems"
           :min-collapsed-num="minCollapsedNum"
           :size="size"
           :disabled="disabled"
@@ -78,10 +78,10 @@ const readonly = ref(false);
 const minCollapsedNum = ref(1);
 
 // Function
-const collapsedItems = (h, { value, onClose }) => {
-  if (!(value instanceof Array)) return null;
-  const count = value.length - minCollapsedNum.value;
-  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
+  if (!(collapsedSelectedItems instanceof Array)) return null;
+  const count = collapsedSelectedItems.length - minCollapsedNum.value;
+  const collapsedTags = collapsedSelectedItems.slice(minCollapsedNum.value, collapsedSelectedItems.length);
   if (count <= 0) return null;
   return (
     <t-popup
@@ -90,14 +90,14 @@ const collapsedItems = (h, { value, onClose }) => {
           <>
             {collapsedTags.map((item, index) => (
               <t-tag
-                key={item}
+                key={item.value}
                 style={{ marginRight: '4px' }}
                 size={size.value}
                 disabled={disabled.value}
                 closable={!readonly.value && !disabled.value}
                 onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
               >
-                {item}
+                {item.label}
               </t-tag>
             ))}
           </>
@@ -115,14 +115,14 @@ const collapsedItems = (h, { value, onClose }) => {
 const CollapsedItemsRender = defineComponent({
   name: 'CollapsedItemsRender',
   // eslint-disable-next-line vue/require-prop-types
-  props: ['value', 'minCollapsedNum'],
+  props: ['collapsedSelectedItems', 'minCollapsedNum'],
   emits: ['close'],
   setup(props, { attrs, emit }) {
     const count = computed(() => {
-      return props.value.length - props.minCollapsedNum;
+      return props.collapsedSelectedItems.length - props.minCollapsedNum;
     });
     const collapsedTags = computed(() => {
-      return props.value.slice(props.minCollapsedNum, props.value.length);
+      return props.collapsedSelectedItems.slice(props.minCollapsedNum, props.collapsedSelectedItems.length);
     });
 
     return () => {
@@ -135,10 +135,10 @@ const CollapsedItemsRender = defineComponent({
                 {collapsedTags.value.map((item, index) => (
                   <t-tag
                     {...attrs}
-                    key={item}
+                    key={item.value}
                     onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
                   >
-                    {item}
+                    {item.label}
                   </t-tag>
                 ))}
               </>
diff --git a/src/select/select.tsx b/src/select/select.tsx
index de91b60450..ecf3770805 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -382,6 +382,7 @@ export default defineComponent({
             ref={selectInputRef}
             class={COMPONENT_NAME.value}
             value={displayText.value}
+            options={props.options}
             disabled={disabled.value}
             popupVisible={innerPopupVisible.value}
             inputValue={innerPopupVisible.value ? innerInputValue.value : ''}
diff --git a/src/tag-input/interface.ts b/src/tag-input/interface.ts
index 0d6ad509ee..46567b3ff2 100644
--- a/src/tag-input/interface.ts
+++ b/src/tag-input/interface.ts
@@ -30,4 +30,6 @@ export interface DragSortInnerProps extends DragSortInnerData {
   getDragProps?: (index?: number, record?: any, tagRef?: Ref<HTMLElement>) => DragSortInnerData;
 }
 
-export interface TagInputProps extends TdTagInputProps, DragSortInnerProps {}
+export interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+  options?: any[]; // 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx
index e4b780a3d8..1413abfebe 100644
--- a/src/tag-input/tag-input.tsx
+++ b/src/tag-input/tag-input.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, toRefs, ref, nextTick, reactive, watch } from 'vue';
+import { defineComponent, computed, toRefs, ref, nextTick, reactive, watch, PropType } from 'vue';
 import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-vue-next';
 import TInput, { InputProps, StrInputProps, TdInputProps } from '../input';
 import { TdTagInputProps } from './type';
@@ -27,7 +27,15 @@ const useComponentClassName = () => {
 export default defineComponent({
   name: 'TTagInput',
 
-  props: { ...props },
+  props: {
+    ...props,
+    /**
+     * 不对外暴露，参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+     */
+    options: {
+      type: Array as PropType<any[]>,
+    },
+  },
 
   setup(props: TdTagInputProps) {
     const { NAME_CLASS, CLEAR_CLASS, BREAK_LINE_CLASS } = useComponentClassName();
diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
index cee413573a..c04859fa9b 100644
--- a/src/tag-input/useTagList.tsx
+++ b/src/tag-input/useTagList.tsx
@@ -104,12 +104,14 @@ export default function useTagList(props: TagInputProps) {
     // 超出省略
     if (newList.length !== (tagValue.value || []).length) {
       const len = tagValue.value.length - newList.length;
+      // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
+      const options = Array.isArray(props?.options) ? props.options : tagValue.value;
       const more = renderTNode('collapsedItems', {
         params: {
           value: tagValue.value,
           count: tagValue.value.length - minCollapsedNum.value,
           collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
-          collapsedSelectedItems: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
+          collapsedSelectedItems: options.slice(minCollapsedNum.value, tagValue.value.length),
           onClose,
         },
       });

From fdc25144219a5fecff39544cd43c0b8a92f18515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Mon, 18 Nov 2024 16:38:30 +0800
Subject: [PATCH 2/7] feat: `valueDisplay` params `value`  change selected
 options

---
 src/select-input/interface.ts        |  1 -
 src/select/hooks/useSelectOptions.ts | 14 ++++++++++----
 src/select/select.tsx                |  8 ++++----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/select-input/interface.ts b/src/select-input/interface.ts
index 33c74d5673..31bb218a1d 100644
--- a/src/select-input/interface.ts
+++ b/src/select-input/interface.ts
@@ -1,5 +1,4 @@
 import { TdSelectInputProps } from './type';
-import { PropType } from 'vue';
 
 export interface SelectInputCommonProperties {
   autofocus?: TdSelectInputProps['autofocus'];
diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts
index 721d08a9a0..cfc0200985 100644
--- a/src/select/hooks/useSelectOptions.ts
+++ b/src/select/hooks/useSelectOptions.ts
@@ -10,6 +10,12 @@ import { KeysType } from '../../common';
 type UniOption = (TdOptionProps | SelectOptionGroup) & {
   index?: number;
   slots?: Slots;
+  disabled?: boolean;
+};
+
+type UniTdOptionProps = TdOptionProps & {
+  index?: number;
+  disabled?: boolean;
 };
 
 export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inputValue: Ref<string>) => {
@@ -81,8 +87,8 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
   });
 
   const optionsList = computed(() => {
-    const res: TdOptionProps[] = [];
-    const getOptionsList = (options: TdOptionProps[]) => {
+    const res: UniTdOptionProps[] = [];
+    const getOptionsList = (options: UniOption[]) => {
       for (const option of options) {
         if ((option as SelectOptionGroup).group) {
           getOptionsList((option as SelectOptionGroup).children);
@@ -96,9 +102,9 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
   });
 
   const optionsMap = computed(() => {
-    const res = new Map<SelectValue, TdOptionProps>();
+    const res = new Map<SelectValue, UniTdOptionProps>();
     // map以最新的为主 避免存在重复value更新的场景 https://github.com/Tencent/tdesign-vue-next/issues/2646
-    optionsCache.value.concat(optionsList.value).forEach((option: TdOptionProps) => {
+    optionsCache.value.concat(optionsList.value).forEach((option: UniTdOptionProps) => {
       res.set(option.value, option);
     });
     return res;
diff --git a/src/select/select.tsx b/src/select/select.tsx
index ecf3770805..36b7e24003 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -121,10 +121,10 @@ export default defineComponent({
     const valueDisplayParams = computed(() => {
       const val =
         props.multiple && isArray(innerValue.value)
-          ? (innerValue.value as SelectValue[]).map((value) => ({
-              value,
-              label: optionsMap.value.get(value)?.label,
-            }))
+          ? (innerValue.value as SelectValue[]).map((value) => {
+              const { index: _, disabled: __, ...rest } = optionsMap.value.get(value);
+              return rest;
+            })
           : innerValue.value;
 
       const params = {

From d0640057b9bb74b34a5f6840b48af68619770a29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Mon, 18 Nov 2024 20:19:43 +0800
Subject: [PATCH 3/7] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/select/_example/collapsed.vue    | 46 +++++++++++++---------------
 src/select/hooks/useSelectOptions.ts |  4 +--
 src/select/select.tsx                | 27 +++++++++++++---
 src/tag-input/useTagList.tsx         |  1 +
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/select/_example/collapsed.vue b/src/select/_example/collapsed.vue
index 17e7451bb2..9d1975f35a 100644
--- a/src/select/_example/collapsed.vue
+++ b/src/select/_example/collapsed.vue
@@ -80,28 +80,30 @@ const minCollapsedNum = ref(1);
 // Function
 const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
   if (!(collapsedSelectedItems instanceof Array)) return null;
-  const count = collapsedSelectedItems.length - minCollapsedNum.value;
-  const collapsedTags = collapsedSelectedItems.slice(minCollapsedNum.value, collapsedSelectedItems.length);
+  const count = collapsedSelectedItems.length;
+
   if (count <= 0) return null;
   return (
     <t-popup
       v-slots={{
-        content: () => (
-          <>
-            {collapsedTags.map((item, index) => (
-              <t-tag
-                key={item.value}
-                style={{ marginRight: '4px' }}
-                size={size.value}
-                disabled={disabled.value}
-                closable={!readonly.value && !disabled.value}
-                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
-              >
-                {item.label}
-              </t-tag>
-            ))}
-          </>
-        ),
+        content: () => {
+          return (
+            <>
+              {collapsedSelectedItems.map((item, index) => (
+                <t-tag
+                  key={item.value}
+                  style={{ marginRight: '4px' }}
+                  size={size.value}
+                  disabled={disabled.value}
+                  closable={!readonly.value && !disabled.value}
+                  onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+                >
+                  {item.label}
+                </t-tag>
+              ))}
+            </>
+          );
+        },
       }}
     >
       <t-tag size={size.value} disabled={disabled.value}>
@@ -118,12 +120,8 @@ const CollapsedItemsRender = defineComponent({
   props: ['collapsedSelectedItems', 'minCollapsedNum'],
   emits: ['close'],
   setup(props, { attrs, emit }) {
-    const count = computed(() => {
-      return props.collapsedSelectedItems.length - props.minCollapsedNum;
-    });
-    const collapsedTags = computed(() => {
-      return props.collapsedSelectedItems.slice(props.minCollapsedNum, props.collapsedSelectedItems.length);
-    });
+    const count = computed(() => props.collapsedSelectedItems.length);
+    const collapsedTags = computed(() => props.collapsedSelectedItems);
 
     return () => {
       if (count.value <= 0) return null;
diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts
index cfc0200985..a578bd5954 100644
--- a/src/select/hooks/useSelectOptions.ts
+++ b/src/select/hooks/useSelectOptions.ts
@@ -7,13 +7,13 @@ import { useChildComponentSlots } from '../../hooks/slot';
 import { TdSelectProps, TdOptionProps, SelectOptionGroup, SelectValue, SelectOption } from '../type';
 import { KeysType } from '../../common';
 
-type UniOption = (TdOptionProps | SelectOptionGroup) & {
+export type UniOption = (TdOptionProps | SelectOptionGroup) & {
   index?: number;
   slots?: Slots;
   disabled?: boolean;
 };
 
-type UniTdOptionProps = TdOptionProps & {
+export type UniTdOptionProps = TdOptionProps & {
   index?: number;
   disabled?: boolean;
 };
diff --git a/src/select/select.tsx b/src/select/select.tsx
index 36b7e24003..a132baf6f5 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -21,7 +21,7 @@ import { useSelectOptions } from './hooks/useSelectOptions';
 import useKeyboardControl from './hooks/useKeyboardControl';
 import type { PopupProps, PopupVisibleChangeContext } from '../popup';
 import type { SelectInputValueChangeContext } from '../select-input';
-import type { TdSelectProps, SelectValue } from './type';
+import type { TdSelectProps, SelectValue, SelectOptionGroup } from './type';
 import { SelectInputValueDisplayOptions } from '../select-input/useSingle';
 
 export default defineComponent({
@@ -122,8 +122,27 @@ export default defineComponent({
       const val =
         props.multiple && isArray(innerValue.value)
           ? (innerValue.value as SelectValue[]).map((value) => {
-              const { index: _, disabled: __, ...rest } = optionsMap.value.get(value);
-              return rest;
+              const option = optionsMap.value.get(value);
+              // if (!option) {
+              //   return { value };
+              // }
+              // const { index, disabled, ...rest } = option;
+              // if ((props.options as unknown as SelectOptionGroup)?.group) {
+              //   const keys = Object.keys((props.options as unknown as SelectOptionGroup)?.children);
+              //   return {
+              //     // ...(keys.includes('index') && { index }),
+              //     // ...(keys.includes('disabled') && { disabled }),
+              //     ...rest,
+              //   };
+              // } else {
+              //   const keys = Object.keys(props.options);
+              //   return {
+              //     // ...(keys.includes('index') && { index }),
+              //     // ...(keys.includes('disabled') && { disabled }),
+              //     ...rest,
+              //   };
+              // }
+              return option;
             })
           : innerValue.value;
 
@@ -382,7 +401,7 @@ export default defineComponent({
             ref={selectInputRef}
             class={COMPONENT_NAME.value}
             value={displayText.value}
-            options={props.options}
+            options={valueDisplayParams.value.value}
             disabled={disabled.value}
             popupVisible={innerPopupVisible.value}
             inputValue={innerPopupVisible.value ? innerInputValue.value : ''}
diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
index c04859fa9b..ffad95de5f 100644
--- a/src/tag-input/useTagList.tsx
+++ b/src/tag-input/useTagList.tsx
@@ -106,6 +106,7 @@ export default function useTagList(props: TagInputProps) {
       const len = tagValue.value.length - newList.length;
       // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
       const options = Array.isArray(props?.options) ? props.options : tagValue.value;
+
       const more = renderTNode('collapsedItems', {
         params: {
           value: tagValue.value,

From 5aab93bb09cd4bf3cb93a0a9e5a1c7cbc6855cea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Mon, 18 Nov 2024 20:36:11 +0800
Subject: [PATCH 4/7] chore: add TODO

---
 src/select/select.tsx | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/select/select.tsx b/src/select/select.tsx
index a132baf6f5..c4aa6dfb4c 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -123,25 +123,7 @@ export default defineComponent({
         props.multiple && isArray(innerValue.value)
           ? (innerValue.value as SelectValue[]).map((value) => {
               const option = optionsMap.value.get(value);
-              // if (!option) {
-              //   return { value };
-              // }
-              // const { index, disabled, ...rest } = option;
-              // if ((props.options as unknown as SelectOptionGroup)?.group) {
-              //   const keys = Object.keys((props.options as unknown as SelectOptionGroup)?.children);
-              //   return {
-              //     // ...(keys.includes('index') && { index }),
-              //     // ...(keys.includes('disabled') && { disabled }),
-              //     ...rest,
-              //   };
-              // } else {
-              //   const keys = Object.keys(props.options);
-              //   return {
-              //     // ...(keys.includes('index') && { index }),
-              //     // ...(keys.includes('disabled') && { disabled }),
-              //     ...rest,
-              //   };
-              // }
+              // TODO: 默认的 option.index 和 option.disabled 要参考是否传入进行剔除
               return option;
             })
           : innerValue.value;

From 172463e262f3f23b6dabf2ac32b4b7a6eeb4e486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Tue, 19 Nov 2024 00:10:26 +0800
Subject: [PATCH 5/7] chore: merge develop

---
 src/select/select.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/select/select.tsx b/src/select/select.tsx
index 69394f9e36..c0da49a16d 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -22,7 +22,7 @@ import { useSelectOptions } from './hooks/useSelectOptions';
 import useKeyboardControl from './hooks/useKeyboardControl';
 import type { PopupProps, PopupVisibleChangeContext } from '../popup';
 import type { SelectInputValueChangeContext } from '../select-input';
-import type { TdSelectProps, SelectValue, SelectOptionGroup } from './type';
+import type { TdSelectProps, SelectValue } from './type';
 import { SelectInputValueDisplayOptions } from '../select-input/useSingle';
 
 export default defineComponent({
@@ -386,7 +386,7 @@ export default defineComponent({
             class={COMPONENT_NAME.value}
             value={displayText.value}
             options={valueDisplayParams.value.value}
-            disabled={disabled.value}
+            disabled={isDisabled.value}
             popupVisible={innerPopupVisible.value}
             inputValue={innerPopupVisible.value ? innerInputValue.value : ''}
             placeholder={`${placeholderText.value}`}

From 17090ff24a86ef53b669dbd8e5f6002d8d7fdd71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Mon, 25 Nov 2024 19:08:03 +0800
Subject: [PATCH 6/7] test(Select): add collapsedItems test

---
 .../__snapshots__/index.test.jsx.snap         | 289 ++++++++++++++++++
 src/select/__tests__/index.test.jsx           | 230 +++++++++-----
 2 files changed, 440 insertions(+), 79 deletions(-)

diff --git a/src/select/__tests__/__snapshots__/index.test.jsx.snap b/src/select/__tests__/__snapshots__/index.test.jsx.snap
index 7f8e6839e6..ff15b46abf 100644
--- a/src/select/__tests__/__snapshots__/index.test.jsx.snap
+++ b/src/select/__tests__/__snapshots__/index.test.jsx.snap
@@ -112,6 +112,71 @@ exports[`Select > :props > :clearable 1`] = `
 </div>
 `;
 
+exports[`Select > :props > :collapsedItems 1`] = `
+<div
+  class="t-select__wrap"
+>
+  <div
+    class="t-select-input t-select-input--multiple t-select-input--empty t-select"
+  >
+    
+    <div
+      class="t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon"
+    >
+      <div
+        class="t-input t-is-readonly t-input--prefix t-input--suffix"
+      >
+        <!---->
+        <div
+          class="t-input__prefix"
+        >
+          
+          
+        </div>
+        <input
+          class="t-input__inner"
+          placeholder="请选择"
+          readonly=""
+          spellcheck="false"
+          type="text"
+          unselectable="on"
+        />
+        <span
+          class="t-input__input-pre"
+        >
+          请选择
+        </span>
+        <!---->
+        <!---->
+        <span
+          class="t-input__suffix t-input__suffix-icon"
+        >
+          <svg
+            class="t-fake-arrow t-select__right-icon"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+              stroke="black"
+              stroke-opacity="0.9"
+              stroke-width="1.3"
+            />
+          </svg>
+        </span>
+      </div>
+      <!---->
+    </div>
+    <!---->
+    
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`Select > :props > :creatable 1`] = `
 <div
   class="t-select__wrap"
@@ -638,6 +703,230 @@ exports[`Select > :props > :size 1`] = `
 </div>
 `;
 
+exports[`Select > Select Option > :props > :disabled 1`] = `
+<div
+  class="t-select__wrap"
+>
+  <div
+    class="t-select-input t-select"
+  >
+    
+    <div
+      class="t-input__wrap"
+    >
+      <div
+        class="t-input t-is-readonly t-input--suffix"
+      >
+        <!---->
+        <!---->
+        <input
+          class="t-input__inner"
+          placeholder="请选择"
+          readonly=""
+          spellcheck="false"
+          type="text"
+          unselectable="on"
+        />
+        <!---->
+        <!---->
+        <!---->
+        <span
+          class="t-input__suffix t-input__suffix-icon"
+        >
+          <svg
+            class="t-fake-arrow t-select__right-icon"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+              stroke="black"
+              stroke-opacity="0.9"
+              stroke-width="1.3"
+            />
+          </svg>
+        </span>
+      </div>
+      <!---->
+    </div>
+    <!---->
+    
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Select > Select Option > :props > :label 1`] = `
+<div
+  class="t-select__wrap"
+>
+  <div
+    class="t-select-input t-select"
+  >
+    
+    <div
+      class="t-input__wrap"
+    >
+      <div
+        class="t-input t-is-readonly t-input--suffix"
+      >
+        <!---->
+        <!---->
+        <input
+          class="t-input__inner"
+          placeholder="请选择"
+          readonly=""
+          spellcheck="false"
+          type="text"
+          unselectable="on"
+        />
+        <!---->
+        <!---->
+        <!---->
+        <span
+          class="t-input__suffix t-input__suffix-icon"
+        >
+          <svg
+            class="t-fake-arrow t-select__right-icon"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+              stroke="black"
+              stroke-opacity="0.9"
+              stroke-width="1.3"
+            />
+          </svg>
+        </span>
+      </div>
+      <!---->
+    </div>
+    <!---->
+    
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Select > Select Option > :props > :value 1`] = `
+<div
+  class="t-select__wrap"
+>
+  <div
+    class="t-select-input t-select"
+  >
+    
+    <div
+      class="t-input__wrap"
+    >
+      <div
+        class="t-input t-is-readonly t-input--suffix"
+      >
+        <!---->
+        <!---->
+        <input
+          class="t-input__inner"
+          placeholder="请选择"
+          readonly=""
+          spellcheck="false"
+          type="text"
+          unselectable="on"
+        />
+        <!---->
+        <!---->
+        <!---->
+        <span
+          class="t-input__suffix t-input__suffix-icon"
+        >
+          <svg
+            class="t-fake-arrow t-select__right-icon"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+              stroke="black"
+              stroke-opacity="0.9"
+              stroke-width="1.3"
+            />
+          </svg>
+        </span>
+      </div>
+      <!---->
+    </div>
+    <!---->
+    
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Select > Select OptionGroup > :props > :value 1`] = `
+<div
+  class="t-select__wrap"
+>
+  <div
+    class="t-select-input t-select"
+  >
+    
+    <div
+      class="t-input__wrap"
+    >
+      <div
+        class="t-input t-is-readonly t-input--suffix"
+      >
+        <!---->
+        <!---->
+        <input
+          class="t-input__inner"
+          placeholder="请选择"
+          readonly=""
+          spellcheck="false"
+          type="text"
+          unselectable="on"
+        />
+        <!---->
+        <!---->
+        <!---->
+        <span
+          class="t-input__suffix t-input__suffix-icon"
+        >
+          <svg
+            class="t-fake-arrow t-select__right-icon"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+              stroke="black"
+              stroke-opacity="0.9"
+              stroke-width="1.3"
+            />
+          </svg>
+        </span>
+      </div>
+      <!---->
+    </div>
+    <!---->
+    
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`Select Option > :props > :disabled 1`] = `
 <div
   class="t-select__wrap"
diff --git a/src/select/__tests__/index.test.jsx b/src/select/__tests__/index.test.jsx
index 50faac6576..f9539f94db 100644
--- a/src/select/__tests__/index.test.jsx
+++ b/src/select/__tests__/index.test.jsx
@@ -1,8 +1,12 @@
 import { ref } from 'vue';
 import { mount } from '@vue/test-utils';
+import { mockDelay } from '@test/utils';
 import { vi, describe, it, expect } from 'vitest';
 import { Select, OptionGroup, Option } from '@/src/select/index.ts';
+import { Popup } from '@/src/popup/index.ts';
+import { Tag } from '@/src/tag/index.ts';
 import { CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
+import { console } from 'inspector';
 
 const options = [
   { label: '架构云', value: '1' },
@@ -140,6 +144,74 @@ describe('Select', () => {
       });
       expect(wrapper.element).toMatchSnapshot();
     });
+
+    it(':collapsedItems', async () => {
+      const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
+        if (!(collapsedSelectedItems instanceof Array)) return null;
+        const count = collapsedSelectedItems.length;
+
+        if (count <= 0) return null;
+        return (
+          <Popup
+            v-slots={{
+              content: () => {
+                return (
+                  <>
+                    {collapsedSelectedItems.map((item, index) => (
+                      <Tag
+                        key={item.value}
+                        style={{ marginRight: '4px' }}
+                        onClose={(context) => onClose({ e: context.e, index: 1 + index })}
+                      >
+                        {item.label}
+                      </Tag>
+                    ))}
+                  </>
+                );
+              },
+            }}
+          >
+            <Tag>Function - More({count})</Tag>
+          </Popup>
+        );
+      };
+
+      const currentOptions = [
+        { label: '架构云', value: '1' },
+        { label: '大数据', value: '2' },
+        { label: '区块链', value: '3' },
+      ];
+      const currentValues = ['1', '2', '3'];
+
+      const wrapper = mount({
+        render() {
+          return (
+            <Select
+              value={currentValues}
+              options={currentOptions}
+              minCollapsedNum={1}
+              multiple
+              collapsed-items={collapsedItems}
+            ></Select>
+          );
+        },
+      });
+
+      const tags = wrapper.findAll('.t-tag');
+      // 默认
+      expect(tags.length).toBe(2);
+      expect(tags[0].text()).toBe('架构云');
+      expect(tags[1].text()).toBe('Function - More(2)');
+      // // collapsedItems popup 展示
+      // await tags[1].trigger('mouseenter');
+
+      // await wrapper.vm.$nextTick();
+      // await mockDelay(300);
+
+      // const queryAllTags = document.querySelector('.t-tag');
+      // expect(queryAllTags).toBeTruthy();
+      // expect(queryAllTags.length).toBe(4);
+    });
   });
 
   describe('@event', () => {
@@ -202,85 +274,84 @@ describe('Select', () => {
       });
     });
   });
-});
 
-describe('Select Option', () => {
-  // test props api
-  describe(':props', () => {
-    it(':value', () => {
-      const value = '1';
-      const wrapper = mount({
-        render() {
-          return (
-            <Select v-model={value}>
-              <Option value={'1'} label={'1'}></Option>
-            </Select>
-          );
-        },
+  describe('Select Option', () => {
+    // test props api
+    describe(':props', () => {
+      it(':value', () => {
+        const value = '1';
+        const wrapper = mount({
+          render() {
+            return (
+              <Select v-model={value}>
+                <Option value={'1'} label={'1'}></Option>
+              </Select>
+            );
+          },
+        });
+        expect(wrapper.element).toMatchSnapshot();
       });
-      expect(wrapper.element).toMatchSnapshot();
-    });
-    it(':label', () => {
-      const value = '1';
-      const wrapper = mount({
-        render() {
-          return (
-            <Select v-model={value}>
-              <Option value={'1'} label={'1'}></Option>
-            </Select>
-          );
-        },
+      it(':label', () => {
+        const value = '1';
+        const wrapper = mount({
+          render() {
+            return (
+              <Select v-model={value}>
+                <Option value={'1'} label={'1'}></Option>
+              </Select>
+            );
+          },
+        });
+        expect(wrapper.element).toMatchSnapshot();
       });
-      expect(wrapper.element).toMatchSnapshot();
-    });
-    it(':disabled', () => {
-      const value = '1';
-      const wrapper = mount({
-        render() {
-          return (
-            <Select v-model={value}>
-              <Option value={'1'} label={'1'} disabled={true}></Option>
-            </Select>
-          );
-        },
+      it(':disabled', () => {
+        const value = '1';
+        const wrapper = mount({
+          render() {
+            return (
+              <Select v-model={value}>
+                <Option value={'1'} label={'1'} disabled={true}></Option>
+              </Select>
+            );
+          },
+        });
+        expect(wrapper.element).toMatchSnapshot();
       });
-      expect(wrapper.element).toMatchSnapshot();
     });
   });
-});
 
-describe('Select OptionGroup', () => {
-  // test props api
-  describe(':props', () => {
-    it(':value', () => {
-      const value = '1';
-      const wrapper = mount({
-        render() {
-          return (
-            <Select v-model={value}>
-              <OptionGroup label={'num'}>
-                <Option value={'1'} label={'1'}></Option>
-              </OptionGroup>
-              <OptionGroup label={'abc'}>
-                <Option value={'a'} label={'a'}></Option>
-              </OptionGroup>
-            </Select>
-          );
-        },
+  describe('Select OptionGroup', () => {
+    // test props api
+    describe(':props', () => {
+      it(':value', () => {
+        const value = '1';
+        const wrapper = mount({
+          render() {
+            return (
+              <Select v-model={value}>
+                <OptionGroup label={'num'}>
+                  <Option value={'1'} label={'1'}></Option>
+                </OptionGroup>
+                <OptionGroup label={'abc'}>
+                  <Option value={'a'} label={'a'}></Option>
+                </OptionGroup>
+              </Select>
+            );
+          },
+        });
+        expect(wrapper.element).toMatchSnapshot();
       });
-      expect(wrapper.element).toMatchSnapshot();
     });
-  });
 
-  describe(':base', () => {
-    it('v-for and option works fine', async () => {
-      const Comp = {
-        components: {
-          TSelect: Select,
-          TOptionGroup: OptionGroup,
-          TOption: Option,
-        },
-        template: `
+    describe(':base', () => {
+      it('v-for and option works fine', async () => {
+        const Comp = {
+          components: {
+            TSelect: Select,
+            TOptionGroup: OptionGroup,
+            TOption: Option,
+          },
+          template: `
           <t-select>
             <t-option-group label='test'>
               <t-option v-for='i in ["1", "2"]' :key='i' :label='i' :value='i'></t-option>
@@ -296,19 +367,20 @@ describe('Select OptionGroup', () => {
             </t-option-group>
           </t-select>
         `,
-      };
+        };
 
-      const wrapper = mount(Comp);
-      await wrapper.setProps({ popupProps: { visible: true } });
+        const wrapper = mount(Comp);
+        await wrapper.setProps({ popupProps: { visible: true } });
 
-      const panelNode = document.querySelector('.t-select__list');
-      const groupNode = document.querySelectorAll('.t-select-option-group');
-      expect(groupNode.length).toBe(3);
-      groupNode.forEach((item) => {
-        const option = item.querySelectorAll('.t-select-option');
-        expect(option.length).toBe(3);
+        const panelNode = document.querySelector('.t-select__list');
+        const groupNode = document.querySelectorAll('.t-select-option-group');
+        expect(groupNode.length).toBe(3);
+        groupNode.forEach((item) => {
+          const option = item.querySelectorAll('.t-select-option');
+          expect(option.length).toBe(3);
+        });
+        panelNode.parentNode.removeChild(panelNode);
       });
-      panelNode.parentNode.removeChild(panelNode);
     });
   });
 });

From 694221052e3019b2f51f7f97c75421c09640683f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Wed, 27 Nov 2024 17:03:56 +0800
Subject: [PATCH 7/7] test(Select): add test

---
 src/select/__tests__/index.test.jsx | 207 ++++++++++++++++++++++------
 1 file changed, 165 insertions(+), 42 deletions(-)

diff --git a/src/select/__tests__/index.test.jsx b/src/select/__tests__/index.test.jsx
index f9539f94db..1500c1153b 100644
--- a/src/select/__tests__/index.test.jsx
+++ b/src/select/__tests__/index.test.jsx
@@ -1,12 +1,11 @@
 import { ref } from 'vue';
 import { mount } from '@vue/test-utils';
-import { mockDelay } from '@test/utils';
 import { vi, describe, it, expect } from 'vitest';
 import { Select, OptionGroup, Option } from '@/src/select/index.ts';
 import { Popup } from '@/src/popup/index.ts';
 import { Tag } from '@/src/tag/index.ts';
+import { Button } from '@/src/button/index.ts';
 import { CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
-import { console } from 'inspector';
 
 const options = [
   { label: '架构云', value: '1' },
@@ -146,32 +145,102 @@ describe('Select', () => {
     });
 
     it(':collapsedItems', async () => {
+      let visible = ref(false);
+
       const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
         if (!(collapsedSelectedItems instanceof Array)) return null;
         const count = collapsedSelectedItems.length;
+        if (count <= 0) return null;
+        return (
+          <Popup visible={visible.value}>
+            {{
+              content: () =>
+                collapsedSelectedItems.map((item, index) => (
+                  <Button
+                    key={item.value}
+                    style={{ marginRight: '4px' }}
+                    onClose={(context) => onClose({ e: context.e, index: 1 + index })}
+                  >
+                    {item.label}
+                  </Button>
+                )),
+              default: () => <Tag>Function - More({count})</Tag>,
+            }}
+          </Popup>
+        );
+      };
+
+      const currentOptions = [
+        { label: '架构云', value: '1' },
+        { label: '大数据', value: '2' },
+        { label: '区块链', value: '3' },
+      ];
+      const currentValues = ['1', '2'];
+
+      const wrapper = mount(
+        {
+          render() {
+            return (
+              <Select
+                value={currentValues}
+                options={currentOptions}
+                minCollapsedNum={1}
+                multiple
+                collapsedItems={collapsedItems}
+              ></Select>
+            );
+          },
+        },
+        {
+          attachTo: document.body,
+        },
+      );
+
+      const tags = wrapper.findAll('.t-tag');
+      // 默认
+      expect(tags.length).toBe(2);
+      expect(tags[0].text()).toBe('架构云');
+      expect(tags[1].text()).toBe('Function - More(1)');
 
+      // collapsedItems popup 展示
+      // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+      visible.value = true;
+      await wrapper.vm.$nextTick();
+      const buttons = document.querySelectorAll('.t-button');
+      expect(buttons.length).toBe(1);
+
+      // 清理测试数据
+      document.body.innerHTML = '';
+    });
+
+    it(':collapsedItems click', async () => {
+      const visible = ref(false);
+      const minCollapsedNum = 1;
+
+      const collapsedItems = (h, { collapsedSelectedItems }) => {
+        if (!(collapsedSelectedItems instanceof Array)) return null;
+        const count = collapsedSelectedItems.length;
         if (count <= 0) return null;
         return (
           <Popup
+            visible={visible.value}
             v-slots={{
-              content: () => {
-                return (
-                  <>
-                    {collapsedSelectedItems.map((item, index) => (
-                      <Tag
-                        key={item.value}
-                        style={{ marginRight: '4px' }}
-                        onClose={(context) => onClose({ e: context.e, index: 1 + index })}
-                      >
-                        {item.label}
-                      </Tag>
-                    ))}
-                  </>
-                );
-              },
+              content: () => (
+                <>
+                  {collapsedSelectedItems.map((item, index) => (
+                    <Button
+                      key={item.value}
+                      style={{ marginRight: '4px' }}
+                      onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+                    >
+                      {item.label}
+                    </Button>
+                  ))}
+                </>
+              ),
             }}
           >
-            <Tag>Function - More({count})</Tag>
+            <Tag>Function - More({count})</Tag>,
           </Popup>
         );
       };
@@ -181,36 +250,90 @@ describe('Select', () => {
         { label: '大数据', value: '2' },
         { label: '区块链', value: '3' },
       ];
-      const currentValues = ['1', '2', '3'];
+      let selectedOptions = [];
+      const onChange = (_value, context) => {
+        selectedOptions = context.selectedOptions;
+      };
 
-      const wrapper = mount({
-        render() {
-          return (
-            <Select
-              value={currentValues}
-              options={currentOptions}
-              minCollapsedNum={1}
-              multiple
-              collapsed-items={collapsedItems}
-            ></Select>
-          );
+      const wrapper = mount(
+        {
+          render() {
+            return (
+              <Select
+                class="multiple-select"
+                options={currentOptions}
+                popupProps={{ attach: 'multiple-select' }}
+                minCollapsedNum={minCollapsedNum}
+                multiple
+                collapsedItems={collapsedItems}
+                onChange={onChange}
+              ></Select>
+            );
+          },
         },
-      });
+        {
+          attachTo: document.body,
+        },
+      );
 
-      const tags = wrapper.findAll('.t-tag');
       // 默认
-      expect(tags.length).toBe(2);
-      expect(tags[0].text()).toBe('架构云');
-      expect(tags[1].text()).toBe('Function - More(2)');
-      // // collapsedItems popup 展示
-      // await tags[1].trigger('mouseenter');
+      const tags = wrapper.findAll('.t-tag');
+      expect(tags.length).toBe(0);
+
+      //  第一次选择
+      // 目前无法通过 triggerEvent 触发 mouseenter 事件展开 select popup
+      await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+      await wrapper.vm.$nextTick();
+      const groupNode1 = wrapper.findAll('.t-select-option');
+      expect(groupNode1.length).toBe(3);
+
+      await groupNode1[0].trigger('click');
+      await wrapper.vm.$nextTick();
+      const tags1 = wrapper.findAll('.t-tag');
+      expect(tags1.length).toBe(1);
+      expect(tags1[0].text()).toBe(currentOptions[0].label);
+
+      //  第二次选择(选择options的第三个数据-区块链)
+      await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+      await wrapper.vm.$nextTick();
+      const groupNode2 = wrapper.findAll('.t-select-option');
+      expect(groupNode2.length).toBe(3);
+
+      await groupNode2[2].trigger('click');
+      await wrapper.vm.$nextTick();
+      const tags2 = wrapper.findAll('.t-tag');
+      expect(tags2.length).toBe(2);
+      expect(tags2[0].text()).toBe(currentOptions[0].label);
+      expect(tags2[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`);
+      // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+      visible.value = true;
+      await wrapper.vm.$nextTick();
+      const buttons1 = document.querySelectorAll('.t-button');
+      expect(buttons1.length).toBe(1);
+      expect(buttons1[0].textContent).toBe('区块链');
+
+      //  第三次选择(选择options的第二个数据-大数据)
+      await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+      await wrapper.vm.$nextTick();
+      const groupNode3 = wrapper.findAll('.t-select-option');
+      expect(groupNode3.length).toBe(3);
 
-      // await wrapper.vm.$nextTick();
-      // await mockDelay(300);
+      await groupNode3[1].trigger('click');
+      await wrapper.vm.$nextTick();
+      const tags3 = wrapper.findAll('.t-tag');
+      expect(tags3.length).toBe(2);
+      expect(tags3[0].text()).toBe(currentOptions[0].label);
+      expect(tags3[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`);
+      // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+      visible.value = true;
+      await wrapper.vm.$nextTick();
+      const buttons2 = document.querySelectorAll('.t-button');
+      expect(buttons2.length).toBe(2);
+      expect(buttons2[0].textContent).toBe('区块链');
+      expect(buttons2[1].textContent).toBe('大数据');
 
-      // const queryAllTags = document.querySelector('.t-tag');
-      // expect(queryAllTags).toBeTruthy();
-      // expect(queryAllTags.length).toBe(4);
+      // 清理测试数据
+      document.body.innerHTML = '';
     });
   });