diff --git a/docs/demo/focus.tsx b/docs/demo/focus.tsx new file mode 100644 index 0000000..cec0ee3 --- /dev/null +++ b/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(null); + useLayoutEffect(() => { + if (ref.current) { + ref.current.focus({ preventScroll: true }); + } + }, []); + return ( +
+ +
+ ); +}; + +const Demo = () => { + const [open, setOpen] = useState(false); + return ( +
+
+ setOpen(!open)}>{`${open}`} +
+ {open && } +
+
+ ); +}; + +export default Demo; diff --git a/docs/example.md b/docs/example.md index 16cf22a..cf3d727 100644 --- a/docs/example.md +++ b/docs/example.md @@ -6,3 +6,5 @@ nav: --- + + diff --git a/src/index.tsx b/src/index.tsx index 7d7996a..e751ad9 100644 --- a/src/index.tsx +++ b/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((props, ref) => { }); useImperativeHandle(ref, () => ({ - focus: () => { - inputRef.current?.focus(); + focus: (options) => { + inputRef.current?.focus(options); }, blur: () => { inputRef.current?.blur();