From 229bc6b5bb1f18790fcced96a01c71db7679903a Mon Sep 17 00:00:00 2001 From: GermanVor Date: Thu, 12 Dec 2024 20:58:09 +0100 Subject: [PATCH] chore: add autoFocus property for Select --- src/components/Select/README.md | 1 + src/components/Select/Select.tsx | 5 +++++ src/components/Select/types.ts | 1 + 3 files changed, 7 insertions(+) diff --git a/src/components/Select/README.md b/src/components/Select/README.md index cd5031273b..7609532283 100644 --- a/src/components/Select/README.md +++ b/src/components/Select/README.md @@ -1124,6 +1124,7 @@ LANDING_BLOCK--> | className | Control className | `string` | | | defaultValue | Default values that represent selected options in case of using uncontrolled state | `string[]` | | | disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | +| autoFocus | Sets focus on | `boolean` | `false` | | [filterable](#filtering-options) | Indicates that select popup have filter section | `boolean` | `false` | | filterOption | Used to compare option with filter | `function` | | | filterPlaceholder | Default filter input placeholder text | `string` | | diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 22dba73d51..47dd8432b0 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -99,6 +99,7 @@ export const Select = React.forwardRef(function hasCounter, renderCounter, title, + autoFocus = false, } = props; const mobile = useMobile(); const [filter, setFilter] = useControlledState(propsFilter, '', onFilterChange); @@ -122,6 +123,10 @@ export const Select = React.forwardRef(function disabled, }); + React.useEffect(() => { + if (autoFocus) controlRef.current?.focus(); + }, [autoFocus]); + React.useEffect(() => { if (!open && filterable && mobile) { // FIXME: add handlers to Sheet like in https://github.com/gravity-ui/uikit/issues/1354 diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts index 7f88949748..7e64f44b9a 100644 --- a/src/components/Select/types.ts +++ b/src/components/Select/types.ts @@ -164,6 +164,7 @@ export type SelectProps = QAProps & name?: string; form?: string; disabled?: boolean; + autoFocus?: boolean; }; export type SelectOption = QAProps &