feat: support focus options (#275)

Author: crazyair

docs/demo/focus.tsx

@@ -0,0 +1,33 @@
+import type { CheckboxRef } from 'rc-checkbox';
+import Checkbox from 'rc-checkbox';
+import { useLayoutEffect, useRef, useState } from 'react';
+import '../../assets/index.less';
+
+const MyCheckbox = () => {
+  const ref = useRef<CheckboxRef>(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.focus({ preventScroll: true });
+    }
+  }, []);
+  return (
+    <div>
+      <Checkbox ref={ref} />
+    </div>
+  );
+};
+
+const Demo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <div style={{ height: '50vh' }} />
+      <a onClick={() => setOpen(!open)}>{`${open}`}</a>
+      <div style={{ height: '80vh' }} />
+      {open && <MyCheckbox />}
+      <div style={{ height: '30vh' }} />
+    </div>
+  );
+};
+
+export default Demo;

docs/example.md

@@ -6,3 +6,5 @@ nav:
 ---
 
 <code src="./demo/simple.tsx"></code>
+
+<code src="./demo/focus.tsx"></code>

src/index.tsx

@@ -15,7 +15,7 @@ export interface CheckboxChangeEventTarget extends CheckboxProps {
 }
 
 export interface CheckboxRef {
-  focus: () => void;
+  focus: (options?: FocusOptions) => void;
   blur: () => void;
   input: HTMLInputElement | null;
 }
@@ -46,8 +46,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   });
 
   useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current?.focus();
+    focus: (options) => {
+      inputRef.current?.focus(options);
     },
     blur: () => {
       inputRef.current?.blur();