Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/components/select/__tests__/select.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,35 @@ describe('Select 组件测试', () => {
);
});

test('分组选择器全选测试', async () => {
const OptionGroupCheckAllSelect = () => {
const [value, setValue] = useState(['apple']);
const onChange = (value) => {
setValue(value);
};

return (
<Select value={value} onChange={onChange} multiple>
<Option key="all" label="All" value="all" checkAll />
<OptionGroup label="Fruit">
{options.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
</Select>
);
};

const { getByText } = render(<OptionGroupCheckAllSelect />);
fireEvent.click(document.querySelector('.t-input'));

// 点击全选,input 展示 Apple、Banana、Orange 选项
fireEvent.click(getByText('All'));
expect(document.querySelector(selectSelector)).toHaveTextContent('Apple');
expect(document.querySelector(selectSelector)).toHaveTextContent('Banana');
expect(document.querySelector(selectSelector)).toHaveTextContent('Orange');
});

test('可过滤选择器测试', async () => {
const testId = 'test-id';
const FilterableSelect = () => {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/select/base/Option.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,12 @@ const Option: React.FC<SelectOptionProps> = (props) => {

const label = propLabel || value;
const disabled = propDisabled || (multiple && Array.isArray(selectedValue) && max && selectedValue.length >= max);
const initCheckedStatus = !(Array.isArray(selectedValue) && selectedValue.length === props.optionLength);

let selected: boolean;
let indeterminate: boolean;
// 处理存在禁用项时,全选状态无法来回切换的问题
const [allSelectableChecked, setAllSelectableChecked] = useState(!selected);
const [allSelectableChecked, setAllSelectableChecked] = useState(initCheckedStatus);

const titleContent = useMemo(() => {
// 外部设置 props,说明希望受控
Expand Down
19 changes: 15 additions & 4 deletions packages/components/select/base/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,20 @@ const Select = forwardRefWithStatics(
const { valueKey } = getKeyMapping(keys);
const isObjectType = valueType === 'object';

const enabledOptions = currentOptions.filter(
(opt) => !isSelectOptionGroup(opt) && !opt.checkAll && !opt.disabled,
);
const enabledOptions: SelectOption[] = [];

currentOptions.forEach((option) => {
// 如果涉及分组,需要将分组内的选项进行计算,否则会影响全选的功能
if (isSelectOptionGroup(option)) {
option.children.forEach((item) => {
if (!item.checkAll && !item.disabled) {
enabledOptions.push(item);
}
});
} else {
!option.checkAll && !option.disabled && enabledOptions.push(option);
}
});

const currentValues = Array.isArray(value) ? value : [];
const disabledSelectedOptions = currentOptions.filter((opt) => {
Expand Down Expand Up @@ -263,7 +274,7 @@ const Select = forwardRefWithStatics(

if (multiple && context?.trigger === 'uncheck' && isFunction(onRemove)) {
const value = context?.value;
const option = (options as OptionsType).find((option) => option.value === value);
const option = (options as OptionsType)?.find((option) => option.value === value);
onRemove({
value,
data: option,
Expand Down
Loading