fix(tag-input): prevent backspace event in readonly mode and add test (#3376)

Author: RSS1102

src/tag-input/__tests__/vitest-tag-input.test.jsx

@@ -210,7 +210,7 @@ describe('TagInput Component', () => {
     expect(wrapper.attributes('placeholder')).toBe('This is TagInput placeholder');
   });
 
-  it('props.readonly works fine', () => {
+  it('props.readonly works fine', async () => {
     // readonly default value is false
     const wrapper1 = mount({
       render() {
@@ -225,13 +225,26 @@ describe('TagInput Component', () => {
       },
     }).find('.t-input');
     expect(wrapper2.classes('t-is-readonly')).toBeTruthy();
+
     // readonly = false
     const wrapper3 = mount({
       render() {
         return <TagInput readonly={false}></TagInput>;
       },
     }).find('.t-input');
     expect(wrapper3.classes('t-is-readonly')).toBeFalsy();
+    // readonly = false and able backspace
+    const onRemoveFnOn = vi.fn();
+    const wrapper4 = getTagInputValueMount(TagInput, { readonly: false }, { remove: onRemoveFnOn });
+    wrapper4.find('input').trigger('keydown.backspace');
+    await wrapper4.vm.$nextTick();
+    expect(onRemoveFnOn).toHaveBeenCalled();
+    // readonly = true and prevent backspace
+    const onRemoveFnUn = vi.fn();
+    const wrapper5 = getTagInputValueMount(TagInput, { readonly: true }, { remove: onRemoveFnUn });
+    wrapper5.find('input').trigger('keydown.backspace');
+    await wrapper5.vm.$nextTick();
+    expect(onRemoveFnUn).not.toHaveBeenCalled();
   });
 
   it('props.readonly: readonly TagInput does not need clearIcon', async () => {

src/tag-input/useTagList.tsx

@@ -70,7 +70,7 @@ export default function useTagList(props: TdTagInputProps, context: SetupContext
   // 按下回退键，删除标签
   const onInputBackspaceKeyDown = (value: InputValue, p: { e: KeyboardEvent }) => {
     const { e } = p;
-    if (!tagValue.value || !tagValue.value.length) return;
+    if (!tagValue.value || !tagValue.value.length || readonly.value) return;
     // 回车键删除，输入框值为空时，才允许 Backspace 删除标签
     const isDelete = /(Backspace|NumpadDelete)/.test(e.code) || /(Backspace|NumpadDelete)/.test(e.key);
     if (!value && isDelete) {