diff --git a/README.md b/README.md index 7906ed19..6da84ebf 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ Select also accepts public props from `BaseSelect`, except `showSearch`, which i | Name | Description | Type | Default | | --- | --- | --- | --- | +| autoComplete | Browser autocomplete hint for the search input. | string | `new-password` | | autoClearSearchValue | Deprecated. Use `showSearch.autoClearSearchValue` instead. | boolean | true | | backfill | Backfill the active option into the input. Only works in `combobox` mode. | boolean | false | | children | Legacy option children. Prefer `options` for new code. | ReactNode | - | diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index a4569e5e..bd2f9925 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -144,6 +144,7 @@ export interface BaseSelectProps tagRender?: (props: CustomTagProps) => React.ReactElement; direction?: 'ltr' | 'rtl'; autoFocus?: boolean; + autoComplete?: string; placeholder?: React.ReactNode; maxCount?: number; diff --git a/src/SelectInput/Input.tsx b/src/SelectInput/Input.tsx index 02975b4e..dc768044 100644 --- a/src/SelectInput/Input.tsx +++ b/src/SelectInput/Input.tsx @@ -43,6 +43,7 @@ const Input = React.forwardRef((props, ref) => { autoFocus, tokenWithEnter, placeholder, + autoComplete: contextAutoComplete, components: { input: InputComponent = 'input' }, } = useSelectInputContext(); const { id, classNames, styles, open, activeDescendantId, role, disabled } = useBaseProps() || {}; @@ -170,7 +171,7 @@ const Input = React.forwardRef((props, ref) => { '--select-input-width': widthCssVar, } as React.CSSProperties, autoFocus, - autoComplete: autoComplete || 'new-password', + autoComplete: autoComplete ?? contextAutoComplete ?? 'new-password', className: inputCls, disabled, value: value || '', diff --git a/src/SelectInput/index.tsx b/src/SelectInput/index.tsx index 995c31c1..cc22674b 100644 --- a/src/SelectInput/index.tsx +++ b/src/SelectInput/index.tsx @@ -37,6 +37,7 @@ export interface SelectInputProps extends Omit void; maxLength?: number; autoFocus?: boolean; + autoComplete?: string; /** Check if tokenization should treat pasted line breaks as separators */ tokenWithEnter?: boolean; // Add other props that need to be passed through @@ -60,6 +61,7 @@ const DEFAULT_OMIT_PROPS = [ 'onPopupScroll', 'tabIndex', 'activeValue', + 'autoComplete', 'onSelectorRemove', 'focused', ] as const; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 4e6ccd69..cb551428 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1424,7 +1424,7 @@ describe('Select.Basic', () => { expect(container.querySelector('.rc-select-item-empty').textContent).toEqual('Not Found'); }); - it('uses text input type and disables browser autocomplete for search', () => { + it('uses text input type with autocomplete suppression by default', () => { const { container } = render( + + , + ); + + expect(container.querySelector('input')).toHaveAttribute('autocomplete', 'off'); + expect(container.querySelector('.rc-select')).not.toHaveAttribute('autocomplete'); + }); + it('warns on invalid children', () => { const Foo = (value) =>
foo{value}
; const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);