diff --git a/README.md b/README.md index 4e666e10..4b18c1c7 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ export default () => ( | optionRender | Custom rendering options | (oriOption: FlattenOptionData\ , info: { index: number }) => React.ReactNode | - | | labelRender | Custom rendering label | (props: LabelInValueType) => React.ReactNode | - | | maxCount | The max number of items can be selected | number | - | +| inputProps | props passed to the internal input element | React.InputHTMLAttributes | - | ### Methods diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 2b56b4dc..7215b30e 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -130,8 +130,7 @@ export interface BaseSelectPrivateProps { export type BaseSelectPropsWithoutPrivate = Omit; export interface BaseSelectProps - extends - BaseSelectPrivateProps, + extends BaseSelectPrivateProps, React.AriaAttributes, Pick, 'role'> { // Style @@ -229,6 +228,10 @@ export interface BaseSelectProps // >>> Components components?: ComponentsConfig; + + // >>> Input + /** Props passed to the internal input element */ + inputProps?: React.InputHTMLAttributes; } export const isMultiple = (mode: Mode) => mode === 'tags' || mode === 'multiple'; diff --git a/src/SelectInput/Content/index.tsx b/src/SelectInput/Content/index.tsx index fc56d19a..e10eeb03 100644 --- a/src/SelectInput/Content/index.tsx +++ b/src/SelectInput/Content/index.tsx @@ -10,7 +10,12 @@ export interface SharedContentProps { } const SelectContent = React.forwardRef(function SelectContent(_, ref) { - const { multiple, onInputKeyDown, tabIndex } = useSelectInputContext(); + const { + multiple, + onInputKeyDown, + tabIndex, + inputProps: userInputProps, + } = useSelectInputContext(); const baseProps = useBaseProps(); const { showSearch } = baseProps; @@ -18,6 +23,7 @@ const SelectContent = React.forwardRef(function SelectContent( const sharedInputProps: SharedContentProps['inputProps'] = { ...ariaProps, + ...userInputProps, onKeyDown: onInputKeyDown, readOnly: !showSearch, tabIndex, diff --git a/src/SelectInput/Input.tsx b/src/SelectInput/Input.tsx index 8c12606a..c52d5acc 100644 --- a/src/SelectInput/Input.tsx +++ b/src/SelectInput/Input.tsx @@ -21,6 +21,8 @@ export interface InputProps { syncWidth?: boolean; /** autoComplete for input */ autoComplete?: string; + /** Props passed to the internal input element */ + inputProps?: React.InputHTMLAttributes; } const Input = React.forwardRef((props, ref) => { @@ -33,6 +35,7 @@ const Input = React.forwardRef((props, ref) => { value, className, autoComplete, + inputProps, ...restProps } = props; const { @@ -164,6 +167,7 @@ const Input = React.forwardRef((props, ref) => { id, type: mode === 'combobox' ? 'text' : 'search', ...restProps, + ...inputProps, ref: inputRef as React.Ref, style: { ...styles?.input, diff --git a/src/SelectInput/index.tsx b/src/SelectInput/index.tsx index ee5ad4fc..090dffc8 100644 --- a/src/SelectInput/index.tsx +++ b/src/SelectInput/index.tsx @@ -48,6 +48,8 @@ export interface SelectInputProps extends Omit; } const DEFAULT_OMIT_PROPS = [ @@ -65,6 +67,7 @@ const DEFAULT_OMIT_PROPS = [ 'activeValue', 'onSelectorRemove', 'focused', + 'inputProps', ] as const; export default React.forwardRef(function SelectInput( diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index d107743d..22de60f3 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -190,4 +190,24 @@ describe('BaseSelect', () => { expect(container.querySelector('.custom-root-element')).toBeTruthy(); expect(container.querySelector('.rc-select')).toBeFalsy(); }); + + it('should pass inputProps to internal input', () => { + const { container } = render( + {}} + onSearch={() => {}} + searchValue="" + />, + ); + + const input = container.querySelector('input'); + expect(input?.getAttribute('spellcheck')).toBe('false'); + }); });