mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: CheckableTag support ref (#45164)

Browse Source 
* fix: CheckableTag support ref (#45070)

* optimize test code (#45070)
This commit is contained in:
mingming-ma 2023-10-03 10:59:54 -04:00 committed by GitHub
parent c3ea21ab82
commit a4939fabcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/tag/CheckableTag.tsx
View File

@ -19,7 +19,7 @@ export interface CheckableTagProps {
onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
}
const CheckableTag: React.FC<CheckableTagProps> = (props) => {
const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
style,
@ -54,6 +54,7 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
return wrapSSR(
<span
{...restProps}
ref={ref}
style={{
...style,
...tag?.style,
@ -62,6 +63,6 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
onClick={handleClick}
/>,
);
};
});
export default CheckableTag;

15
components/tag/__tests__/index.test.tsx
View File

@ -197,6 +197,21 @@ describe('Tag', () => {
fireEvent.click(container.querySelectorAll('.ant-tag')[0]);
expect(onChange).toHaveBeenCalledWith(true);
});
it('should support ref', () => {
const ref = React.createRef<HTMLSpanElement>();
const { container } = render(
<Tag.CheckableTag checked={false} ref={ref}>
Tag Text
</Tag.CheckableTag>,
);
const refElement = ref.current;
const queryTarget = container.querySelector('.ant-tag');
expect(refElement instanceof HTMLSpanElement).toBe(true);
expect(refElement?.textContent).toBe('Tag Text');
expect(queryTarget?.textContent).toBe('Tag Text');
expect(refElement).toBe(queryTarget);
});
});
it('should onClick is undefined', async () => {
const { container } = render(<Tag onClick={undefined} />);