diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx index eef671c899..e50bd1d628 100644 --- a/components/tag/CheckableTag.tsx +++ b/components/tag/CheckableTag.tsx @@ -8,15 +8,19 @@ export interface CheckableTagProps { style?: React.CSSProperties; checked: boolean; onChange?: (checked: boolean) => void; + onClick?: (e: React.MouseEventHandler) => void; } const CheckableTag: React.FC = props => { const { getPrefixCls } = React.useContext(ConfigContext); - const handleClick = () => { - const { checked, onChange } = props; + const handleClick = (e: React.MouseEventHandler) => { + const { checked, onChange, onClick } = props; if (onChange) { onChange(!checked); } + if (onClick) { + onClick(e); + } }; const { prefixCls: customizePrefixCls, className, checked, ...restProps } = props; diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js index c79ba3b5a1..fa04c69c6d 100644 --- a/components/tag/__tests__/index.test.js +++ b/components/tag/__tests__/index.test.js @@ -42,6 +42,30 @@ describe('Tag', () => { expect(wrapper.find('.ant-tag:not(.ant-tag-hidden)').length).toBe(1); }); + it('should trigger onClick', () => { + const onClick = jest.fn(); + const wrapper = mount(); + wrapper.find('.ant-tag').simulate('click'); + expect(onClick).toHaveBeenCalledWith( + expect.objectContaining({ + type: 'click', + preventDefault: expect.any(Function), + }), + ); + }); + + it('should trigger onClick on CheckableTag', () => { + const onClick = jest.fn(); + const wrapper = mount(); + wrapper.find('.ant-tag').simulate('click'); + expect(onClick).toHaveBeenCalledWith( + expect.objectContaining({ + type: 'click', + preventDefault: expect.any(Function), + }), + ); + }); + // https://github.com/ant-design/ant-design/issues/20344 it('should not trigger onClick when click close icon', () => { const onClose = jest.fn();