From a0ef928b6041c88098476beadcbaf5771984d1e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Wed, 28 Feb 2024 15:49:16 +0800
Subject: [PATCH] feat: support focus options (#1030)

* feat: done

* feat: add demo

* feat: add demo
---
 .gitignore              |  1 -
 .prettierignore         | 11 +++++++++++
 docs/demo/focus.md      |  8 ++++++++
 docs/examples/focus.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 src/BaseSelect.tsx      |  2 +-
 src/Selector/index.tsx  | 16 ++++++++--------
 6 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 docs/demo/focus.md
 create mode 100644 docs/examples/focus.tsx

diff --git a/.gitignore b/.gitignore
index b3dc0872..90ae753c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,7 +35,6 @@ src/*.js
 src/*.map
 tslint.json
 tsconfig.test.json
-.prettierignore
 .doc
 .umi
 .dumi/tmp
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..21437722
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,11 @@
+.doc
+.storybook
+es
+lib
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test
diff --git a/docs/demo/focus.md b/docs/demo/focus.md
new file mode 100644
index 00000000..898aecf7
--- /dev/null
+++ b/docs/demo/focus.md
@@ -0,0 +1,8 @@
+---
+title: focus
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/focus.tsx"></code>
diff --git a/docs/examples/focus.tsx b/docs/examples/focus.tsx
new file mode 100644
index 00000000..6b0733da
--- /dev/null
+++ b/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;
diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
index 3208301d..912142a1 100644
--- a/src/BaseSelect.tsx
+++ b/src/BaseSelect.tsx
@@ -70,7 +70,7 @@ export type CustomTagProps = {
 };
 
 export interface BaseSelectRef {
-  focus: () => void;
+  focus: (options?: FocusOptions) => void;
   blur: () => void;
   scrollTo: ScrollTo;
 }
diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx
index 711bf276..e0ca1726 100644
--- a/src/Selector/index.tsx
+++ b/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();