diff --git a/src/tag-input/__tests__/vitest-tag-input.test.jsx b/src/tag-input/__tests__/vitest-tag-input.test.jsx index d73b47a168..a7db2dccb5 100644 --- a/src/tag-input/__tests__/vitest-tag-input.test.jsx +++ b/src/tag-input/__tests__/vitest-tag-input.test.jsx @@ -163,6 +163,16 @@ describe('TagInput Component', () => { const wrapper3 = render(); const container3 = wrapper3.container.querySelector('.t-input'); expect(container3.querySelector(`.${'t-is-readonly'}`)).toBeFalsy(); + // readonly = false backspace able + const onRemoveFn = vi.fn(); + const wrapper4 = getTagInputValueMount(TagInput, { readonly: false }, { onRemove: onRemoveFn }); + fireEvent.keyDown(wrapper4.container.querySelector('input'), { key: 'Backspace', code: 'Backspace', charCode: 8 }); + expect(onRemoveFn).toHaveBeenCalled(); + // readonly = false backspace disable + const onRemoveFnUn = vi.fn(); + const wrapper5 = getTagInputValueMount(TagInput, { readonly: true }, { onRemove: onRemoveFnUn }); + fireEvent.keyDown(wrapper5.container.querySelector('input'), { key: 'Backspace', code: 'Backspace', charCode: 8 }); + expect(onRemoveFnUn).not.toHaveBeenCalled(); }); it('props.readonly: readonly TagInput does not need clearIcon', async () => { diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx index e37b1a9861..2066100780 100644 --- a/src/tag-input/useTagList.tsx +++ b/src/tag-input/useTagList.tsx @@ -57,7 +57,7 @@ export default function useTagList(props: TagInputProps) { // 按下回退键,删除标签 const onInputBackspaceKeyDown = (value: InputValue, context: { e: KeyboardEvent }) => { const { e } = context; - if (!tagValue || !tagValue.length) return; + if (!tagValue || !tagValue.length || readonly) return; // 回车键删除,输入框值为空时,才允许 Backspace 删除标签 if (!value && ['Backspace', 'NumpadDelete'].includes(e.key)) { const index = tagValue.length - 1;