fix(tag-input): prevent backspace event in readonly mode (#3172)

test(tag-input): add test
Tencent · Nov 1, 2024 · 4f54dc3 · 4f54dc3
1 parent e9d8bd8
commit 4f54dc3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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(<TagInput readonly={false}></TagInput>);
     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
@@ -57,7 +57,7 @@ export default function useTagList(props: TagInputProps) {
   // 按下回退键，删除标签
   const onInputBackspaceKeyDown = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
     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;