From 7a82523799534143584d7524df8aede8c245bc9e Mon Sep 17 00:00:00 2001
From: liuzaijiang <530604689@qq.com>
Date: Thu, 7 Jul 2022 19:30:29 +0800
Subject: [PATCH] fix(comp:select): when over multiplelimit, the option can
still be selected
fix #1000
---
.../cascader/src/contents/OverlayOption.tsx | 3 +++
packages/components/select/__tests__/select.spec.ts | 11 ++++++++++-
packages/components/select/src/panel/Option.tsx | 13 ++++++++-----
3 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/packages/components/cascader/src/contents/OverlayOption.tsx b/packages/components/cascader/src/contents/OverlayOption.tsx
index 9cff1334c..ae23da966 100644
--- a/packages/components/cascader/src/contents/OverlayOption.tsx
+++ b/packages/components/cascader/src/contents/OverlayOption.tsx
@@ -66,6 +66,9 @@ export default defineComponent({
const handleClick = () => {
if (props.isLeaf) {
+ if (!isSelected.value && selectedLimit.value) {
+ return
+ }
handleSelect(key)
setOverlayOpened(false)
} else {
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index 6be32fdf3..ca60e0539 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/packages/components/select/__tests__/select.spec.ts
@@ -510,8 +510,9 @@ describe('Select', () => {
})
test('multipleLimit work', async () => {
+ const onChange = vi.fn()
const wrapper = SelectMount({
- props: { open: true, value: [0, 1, 2, 3], multipleLimit: 4 },
+ props: { open: true, value: [0, 1, 2, 3], multipleLimit: 4, onChange },
})
let options = wrapper.findAllComponents(Option)
@@ -519,12 +520,20 @@ describe('Select', () => {
expect(options[4].find('.ix-checkbox').classes()).toContain('ix-checkbox-disabled')
expect(options[4].attributes('title')).toBe('该选择器的值不能超过 4 项')
+ await options[4].trigger('click')
+
+ expect(onChange).not.toBeCalled()
+
await wrapper.setProps({ multipleLimit: 5 })
options = wrapper.findAllComponents(Option)
expect(options[4].find('.ix-checkbox').classes()).not.toContain('ix-checkbox-disabled')
expect(options[4].attributes('title')).toBe('A4')
+
+ await options[4].trigger('click')
+
+ expect(onChange).toBeCalled()
})
test('maxLabel work', async () => {
diff --git a/packages/components/select/src/panel/Option.tsx b/packages/components/select/src/panel/Option.tsx
index ffa52cb77..6f4badb5a 100644
--- a/packages/components/select/src/panel/Option.tsx
+++ b/packages/components/select/src/panel/Option.tsx
@@ -36,13 +36,15 @@ export default defineComponent({
const isSelected = computed(() => selectedKeys.value.some(selectedKey => selectedKey === key))
+ const isDisabled = computed(() => props.disabled || (!isSelected.value && selectedLimit.value))
+
const classes = computed(() => {
- const { disabled, parentKey } = props
+ const { parentKey } = props
const prefixCls = `${mergedPrefixCls.value}-option`
return {
[prefixCls]: true,
[`${prefixCls}-active`]: isActive.value,
- [`${prefixCls}-disabled`]: disabled,
+ [`${prefixCls}-disabled`]: isDisabled.value,
[`${prefixCls}-grouped`]: !isNil(parentKey),
[`${prefixCls}-selected`]: isSelected.value,
}
@@ -55,14 +57,15 @@ export default defineComponent({
}
return () => {
- const { disabled, label, rawData } = props
+ const { label, rawData } = props
const { multiple } = selectPanelProps
const selected = isSelected.value
+ const disabled = isDisabled.value
const prefixCls = `${mergedPrefixCls.value}-option`
const _label = toString(label)
// 优先显示 selectedLimitTitle
- const title = (!(disabled || selected) && selectedLimitTitle.value) || _label
+ const title = (disabled && selectedLimitTitle.value) || _label
const customAdditional = selectPanelProps.customAdditional
? selectPanelProps.customAdditional({ data: rawData!, index: props.index! })
: undefined
@@ -78,7 +81,7 @@ export default defineComponent({
{...rawData!.additional}
{...customAdditional}
>
- {multiple && }
+ {multiple && }
{renderOptionLabel(slots, rawData!, _label)}
)