From 111030402ee0763a8779df77a9b1d9d77b325d21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 17 May 2024 22:07:50 +0800
Subject: [PATCH] feat: support nativeElement

---
 src/index.tsx        | 6 +++++-
 tests/index.test.tsx | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index e751ad9..aac4eee 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,6 +18,7 @@ export interface CheckboxRef {
   focus: (options?: FocusOptions) => void;
   blur: () => void;
   input: HTMLInputElement | null;
+  nativeElement: HTMLElement | null;
 }
 
 export interface CheckboxProps
@@ -41,6 +42,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const holderRef = useRef<HTMLElement>(null);
+
   const [rawValue, setRawValue] = useMergedState(defaultChecked, {
     value: checked,
   });
@@ -53,6 +56,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
       inputRef.current?.blur();
     },
     input: inputRef.current,
+    nativeElement: holderRef.current,
   }));
 
   const classString = classNames(prefixCls, className, {
@@ -86,7 +90,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   };
 
   return (
-    <span className={classString} title={title} style={style}>
+    <span className={classString} title={title} style={style} ref={holderRef}>
       <input
         {...inputProps}
         className={`${prefixCls}-input`}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 92013cc..fbb3390 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -273,4 +273,13 @@ describe('Checkbox ref', () => {
 
     expect(ref.current?.input).toBe(inputEl);
   });
+
+  it('nativeElement should work', () => {
+    const ref = React.createRef<CheckboxRef>();
+
+    const { container } = render(<Checkbox ref={ref} />);
+    const holderEl = container.querySelector('.rc-checkbox')!;
+
+    expect(ref.current?.nativeElement).toBe(holderEl);
+  });
 });