Skip to content

Commit

Permalink
fix(select): fix check all option bug (#3216)
Browse files Browse the repository at this point in the history
* fix(select): 多选下拉框全选功能失效

* fix(select): 补充多选模式下全选功能单测
  • Loading branch information
huangchen1031 authored Nov 22, 2024
1 parent ca02d7d commit 6746eb5
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 2 deletions.
33 changes: 33 additions & 0 deletions src/select/__tests__/select.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,39 @@ describe('Select 组件测试', () => {
});
});

test('多选全选测试', async () => {
const MultipleSelect = () => {
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 />
<Option key="apple" label="Apple" value="apple" />
<Option key="orange" label="Orange" value="orange" />
<Option key="banana" label="Banana" value="banana" />
</Select>
);
};

const { getByText } = render(<MultipleSelect />);

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');

// 再次点击全选,input 清空选项
fireEvent.click(getByText('All'));
expect(document.querySelector(selectSelector)).not.toHaveTextContent('Apple');
expect(document.querySelector(selectSelector)).not.toHaveTextContent('Banana');
expect(document.querySelector(selectSelector)).not.toHaveTextContent('Orange');
});

test('分组选择器测试', async () => {
const OptionGroupSelect = () => {
const [value, setValue] = useState('apple');
Expand Down
6 changes: 4 additions & 2 deletions src/select/base/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,10 @@ const Select = forwardRefWithStatics(
return;
}

const values = currentOptions.filter((option) => !option.checkAll && !option.disabled)
const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions)
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 =
!checkAll && selectableOptions.length !== (props.value as Array<SelectOption>)?.length ? selectableOptions : [];
Expand Down

0 comments on commit 6746eb5

Please sign in to comment.