diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx
index f382849d45..1f801e50c5 100644
--- a/src/select/__tests__/select.test.tsx
+++ b/src/select/__tests__/select.test.tsx
@@ -1,9 +1,12 @@
/* eslint-disable */
-import { render, fireEvent, mockTimeout, act } from '@test/utils';
+import { render, fireEvent, mockTimeout, mockDelay, act } from '@test/utils';
import React, { useState } from 'react';
import userEvent from '@testing-library/user-event';
-import { Select } from '../index';
+import { Select, SelectProps } from '../index';
+import Popup from '../../popup';
+import Space from '../../space';
+import Tag from '../../tag';
const { Option, OptionGroup } = Select;
@@ -365,4 +368,184 @@ describe('Select 组件测试', () => {
expect(getByText(text)).toBeTruthy();
});
});
+
+ test('collapsedItems all select', async () => {
+ const minCollapsedNum = 1;
+ const renderCollapsedItems: SelectProps['collapsedItems'] = ({ collapsedSelectedItems, onClose }) => (
+
+ {collapsedSelectedItems.map((item, index) => (
+ onClose({ e: context.e, index: minCollapsedNum + index })}
+ >
+ {item.label}
+
+ ))}
+
+ }
+ >
+ More({collapsedSelectedItems?.length})
+
+ );
+
+ const MultipleSelect = () => {
+ const selectAllValue = ['apple', 'banana', 'orange'];
+
+ return (
+
+ );
+ };
+ const { container } = render();
+
+ const tags = container.querySelectorAll('.t-tag');
+ expect(tags[0]).toHaveTextContent('Apple');
+ expect(tags[1]).toHaveTextContent('More(2)');
+
+ // collapsedItems popup 未展示
+ const selectPopups = document.querySelectorAll(popupSelector);
+ expect(selectPopups.length).toBe(0);
+
+ // collapsedItems popup 展示
+ fireEvent.mouseEnter(tags[1]);
+ const collapsedPopups = document.querySelectorAll(popupSelector);
+ expect(collapsedPopups.length).toBe(1);
+ // 判断展示的tag
+ const collapsedTags = collapsedPopups[0].querySelectorAll('.t-tag');
+ expect(collapsedTags.length).toBe(2);
+ expect(collapsedTags[0]).toHaveTextContent('Banana');
+ expect(collapsedTags[1]).toHaveTextContent('Orange');
+ });
+
+ test('collapsedItems click select', async () => {
+ const minCollapsedNum = 1;
+ const renderCollapsedItems: SelectProps['collapsedItems'] = ({ collapsedSelectedItems, onClose }) => (
+
+ {collapsedSelectedItems.map((item, index) => (
+ onClose({ e: context.e, index: minCollapsedNum + index })}
+ >
+ {item.label}
+
+ ))}
+
+ }
+ >
+ More({collapsedSelectedItems?.length})
+
+ );
+
+ const MultipleSelect = () => {
+ const [value, setValue] = useState([]);
+ const onChange = (value) => {
+ setValue(value);
+ };
+ return (
+
+ );
+ };
+ const { getByText, container } = render();
+ const tags0 = container.querySelectorAll('.t-tag');
+ expect(tags0.length).toBe(0);
+
+ // 检测第一次select value
+ expect(document.querySelectorAll(popupSelector).length).toBe(0);
+ fireEvent.click(document.querySelector('.t-input'));
+ fireEvent.click(getByText('Apple'));
+ const tags1 = container.querySelectorAll('.t-tag');
+ expect(tags1.length).toBe(1);
+ expect(tags1[0]).toHaveTextContent('Apple');
+ //input popup 消失
+ fireEvent.click(document.querySelector('.t-input'));
+ expect(document.querySelectorAll(popupSelector).length).toBe(1);
+ await mockTimeout(() => {
+ expect(document.querySelector(popupSelector)).toHaveStyle({
+ display: 'none',
+ });
+ });
+
+ // 检测第二次 select value
+ fireEvent.click(document.querySelector('.t-input'));
+ await mockTimeout(() => {
+ expect(document.querySelector(popupSelector)).toHaveStyle({
+ display: 'block',
+ });
+ });
+ fireEvent.click(getByText('Orange'));
+ const tags2 = container.querySelectorAll('.t-tag');
+ expect(tags2.length).toBe(2);
+ expect(tags2[0]).toHaveTextContent('Apple');
+ expect(tags2[1]).toHaveTextContent('More(1)');
+ //input popup 消失
+ fireEvent.click(document.querySelector('.t-input'));
+ await mockTimeout(() => {
+ expect(document.querySelectorAll(popupSelector).length).toBe(1);
+ expect(document.querySelector(popupSelector)).toHaveStyle({
+ display: 'none',
+ });
+ });
+ // collapsedItems popup 展示
+ fireEvent.mouseEnter(tags2[1]);
+ expect(document.querySelectorAll(popupSelector).length).toBe(2);
+ // 判断展示的tag
+ const collapsedTags2 = document.querySelectorAll('.collapsed-items-popup .t-tag');
+ expect(collapsedTags2.length).toBe(1);
+ expect(collapsedTags2[0]).toHaveTextContent('Orange');
+
+ // 检测第三次 select value
+ fireEvent.click(document.querySelector('.t-input'));
+ await mockTimeout(() => {
+ expect(document.querySelector(popupSelector)).toHaveStyle({
+ display: 'block',
+ });
+ });
+ fireEvent.click(getByText('Banana'));
+ const tags3 = container.querySelectorAll('.t-tag');
+ expect(tags3.length).toBe(2);
+ expect(tags3[0]).toHaveTextContent('Apple');
+ expect(tags3[1]).toHaveTextContent('More(2)');
+ //input popup 消失
+ fireEvent.click(document.querySelector('.t-input'));
+ await mockTimeout(() => {
+ expect(document.querySelectorAll(popupSelector).length).toBe(2);
+ expect(document.querySelector(popupSelector)).toHaveStyle({
+ display: 'none',
+ });
+ });
+ // collapsedItems popup 展示
+ fireEvent.mouseEnter(tags3[1]);
+ expect(document.querySelectorAll(popupSelector).length).toBe(2);
+ // 判断展示的tag
+ const collapsedTags3 = document.querySelectorAll('.collapsed-items-popup .t-tag');
+ expect(collapsedTags3.length).toBe(2);
+ expect(collapsedTags3[0]).toHaveTextContent('Orange');
+ expect(collapsedTags3[1]).toHaveTextContent('Banana');
+ });
});
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
index f7d002756f..8da32842c7 100644
--- a/src/select/base/Select.tsx
+++ b/src/select/base/Select.tsx
@@ -192,9 +192,11 @@ const Select = forwardRefWithStatics(
return;
}
+
const values = currentOptions
.filter((option) => !option.checkAll && !option.disabled)
.map((option) => option[keys?.value || 'value']);
+
const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
const checkAllValue =
@@ -436,7 +438,7 @@ const Select = forwardRefWithStatics(
allowInput={(filterable ?? local.filterable) || isFunction(filter)}
multiple={multiple}
value={selectedLabel}
- options={props.options}
+ options={selectedOptions}
valueDisplay={renderValueDisplay()}
clearable={clearable}
disabled={disabled}