feat: support focus options (#1030)

* feat: done

* feat: add demo

* feat: add demo

Author: crazyair

.gitignore

@@ -35,7 +35,6 @@ src/*.js
 src/*.map
 tslint.json
 tsconfig.test.json
-.prettierignore
 .doc
 .umi
 .dumi/tmp

.prettierignore

@@ -0,0 +1,11 @@
+.doc
+.storybook
+es
+lib
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

docs/demo/focus.md

@@ -0,0 +1,8 @@
+---
+title: focus
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/focus.tsx"></code>

docs/examples/focus.tsx

@@ -0,0 +1,40 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import type { BaseSelectRef } from 'rc-select';
+import Select, { Option } from 'rc-select';
+import '../../assets/index.less';
+
+const MySelect = () => {
+  const ref = useRef<BaseSelectRef>(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.focus({ preventScroll: true });
+    }
+  }, []);
+  return (
+    <div>
+      <Select placeholder="placeholder" showSearch ref={ref}>
+        <Option value="11" text="lucy">
+          lucy
+        </Option>
+        <Option value="21" text="disabled">
+          disabled
+        </Option>
+      </Select>
+    </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 && <MySelect />}
+      <div style={{ height: '30vh' }} />
+    </div>
+  );
+};
+
+export default Demo;

src/BaseSelect.tsx

@@ -70,7 +70,7 @@ export type CustomTagProps = {
 };
 
 export interface BaseSelectRef {
-  focus: () => void;
+  focus: (options?: FocusOptions) => void;
   blur: () => void;
   scrollTo: ScrollTo;
 }

src/Selector/index.tsx

@@ -8,15 +8,15 @@
  * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
  */
 
-import * as React from 'react';
-import { useRef } from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import type { ScrollTo } from 'rc-virtual-list/lib/List';
-import MultipleSelector from './MultipleSelector';
-import SingleSelector from './SingleSelector';
-import useLock from '../hooks/useLock';
+import * as React from 'react';
+import { useRef } from 'react';
 import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../BaseSelect';
+import useLock from '../hooks/useLock';
 import { isValidateOpenKey } from '../utils/keyUtil';
+import MultipleSelector from './MultipleSelector';
+import SingleSelector from './SingleSelector';
 
 export interface InnerSelectorProps {
   prefixCls: string;
@@ -47,7 +47,7 @@ export interface InnerSelectorProps {
 }
 
 export interface RefSelectorProps {
-  focus: () => void;
+  focus: (options?: FocusOptions) => void;
   blur: () => void;
   scrollTo?: ScrollTo;
 }
@@ -122,8 +122,8 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
 
   // ======================= Ref =======================
   React.useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current.focus();
+    focus: (options) => {
+      inputRef.current.focus(options);
     },
     blur: () => {
       inputRef.current.blur();