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 &