diff --git a/packages/x/components/sender/__tests__/slot.test.tsx b/packages/x/components/sender/__tests__/slot.test.tsx index e1cff6a5c..452cf686d 100644 --- a/packages/x/components/sender/__tests__/slot.test.tsx +++ b/packages/x/components/sender/__tests__/slot.test.tsx @@ -523,6 +523,46 @@ describe('Sender Slot Component', () => { setupDOMMocks(customSelectionMock, customRangeMock); fireEvent.keyDown(dom, { key: 'Backspace' }); }); + it('should trigger closable.onClose when removing skill via Backspace', () => { + const onClose = jest.fn(); + const ref = createRef(); + const { container } = render( + , + ); + const dom = ref.current?.inputElement as HTMLElement; + const skillDom = container.querySelector('.ant-sender-skill') as HTMLElement; + expect(ref.current).not.toBeNull(); + expect(skillDom).toBeInTheDocument(); + + const customSelectionMock = { + rangeCount: 1, + focusOffset: 0, + anchorNode: dom, + removeAllRanges: jest.fn(), + addRange: jest.fn(), + }; + + Object.defineProperty(dom, 'previousSibling', { + value: skillDom, + configurable: true, + }); + + const customRangeMock = createMockRange(); + setupDOMMocks(customSelectionMock, customRangeMock); + fireEvent.keyDown(dom, { key: 'Backspace' }); + + expect(onClose).toHaveBeenCalledTimes(1); + expect(container.querySelector('.ant-sender-skill')).not.toBeInTheDocument(); + }); it('should handle skill removal and addition', () => { const { rerender, container } = render( ; + onClose?: (event: React.SyntheticEvent) => void; disabled?: boolean; } diff --git a/packages/x/components/sender/components/SlotTextArea.tsx b/packages/x/components/sender/components/SlotTextArea.tsx index 47963b01d..f183af0bb 100644 --- a/packages/x/components/sender/components/SlotTextArea.tsx +++ b/packages/x/components/sender/components/SlotTextArea.tsx @@ -525,6 +525,10 @@ const SlotTextArea = React.forwardRef((_, ref) => { if (skillKey) { e.preventDefault(); removeSkill(); + // 与点击关闭行为保持一致,删除后补发 closable.onClose + if (skill?.closable && typeof skill.closable === 'object') { + skill.closable.onClose?.(e); + } return true; } } diff --git a/packages/x/components/sender/index.en-US.md b/packages/x/components/sender/index.en-US.md index 88c657671..e97dc3f1e 100644 --- a/packages/x/components/sender/index.en-US.md +++ b/packages/x/components/sender/index.en-US.md @@ -78,7 +78,8 @@ interface SkillType { | boolean | { closeIcon?: React.ReactNode; - onClose?: React.MouseEventHandler; + // Triggered when the skill is removed by clicking the close button or pressing Backspace + onClose?: (event: React.SyntheticEvent) => void; disabled?: boolean; }; } diff --git a/packages/x/components/sender/index.zh-CN.md b/packages/x/components/sender/index.zh-CN.md index 3bbee1423..39ca367a1 100644 --- a/packages/x/components/sender/index.zh-CN.md +++ b/packages/x/components/sender/index.zh-CN.md @@ -80,7 +80,8 @@ interface SkillType { | boolean | { closeIcon?: React.ReactNode; - onClose?: React.MouseEventHandler; + // 点击关闭按钮或使用 Backspace 删除时触发 + onClose?: (event: React.SyntheticEvent) => void; disabled?: boolean; }; } diff --git a/packages/x/components/sender/interface.ts b/packages/x/components/sender/interface.ts index 871d8aad0..808e8fdbd 100644 --- a/packages/x/components/sender/interface.ts +++ b/packages/x/components/sender/interface.ts @@ -59,7 +59,8 @@ export interface SkillType { | boolean | { closeIcon?: React.ReactNode; - onClose?: React.MouseEventHandler; + /** 点击关闭按钮或使用 Backspace 删除时触发 */ + onClose?: (event: React.SyntheticEvent) => void; disabled?: boolean; }; }