feat: add inputProps prop to pass props to internal input

- Add inputProps to BaseSelectProps, SelectInputProps and InputProps
- Merge user inputProps with default props in Content/index.tsx
- Add test case for inputProps
- Update README with API documentation

Close ant-design/ant-design#38012

Author: 刘欢

README.md

@@ -126,6 +126,7 @@ export default () => (
 | optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , 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<HTMLInputElement> | - |
 
 ### Methods
 

src/BaseSelect/index.tsx

@@ -130,8 +130,7 @@ export interface BaseSelectPrivateProps {
 export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
 
 export interface BaseSelectProps
-  extends
-    BaseSelectPrivateProps,
+  extends BaseSelectPrivateProps,
     React.AriaAttributes,
     Pick<React.HTMLAttributes<HTMLElement>, 'role'> {
   // Style
@@ -229,6 +228,10 @@ export interface BaseSelectProps
 
   // >>> Components
   components?: ComponentsConfig;
+
+  // >>> Input
+  /** Props passed to the internal input element */
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 export const isMultiple = (mode: Mode) => mode === 'tags' || mode === 'multiple';

src/SelectInput/Content/index.tsx

@@ -10,14 +10,20 @@ export interface SharedContentProps {
 }
 
 const SelectContent = React.forwardRef<HTMLInputElement>(function SelectContent(_, ref) {
-  const { multiple, onInputKeyDown, tabIndex } = useSelectInputContext();
+  const {
+    multiple,
+    onInputKeyDown,
+    tabIndex,
+    inputProps: userInputProps,
+  } = useSelectInputContext();
   const baseProps = useBaseProps();
   const { showSearch } = baseProps;
 
   const ariaProps = pickAttrs(baseProps, { aria: true });
 
   const sharedInputProps: SharedContentProps['inputProps'] = {
     ...ariaProps,
+    ...userInputProps,
     onKeyDown: onInputKeyDown,
     readOnly: !showSearch,
     tabIndex,

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<HTMLInputElement>;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
@@ -33,6 +35,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     value,
     className,
     autoComplete,
+    inputProps,
     ...restProps
   } = props;
   const {
@@ -164,6 +167,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     id,
     type: mode === 'combobox' ? 'text' : 'search',
     ...restProps,
+    ...inputProps,
     ref: inputRef as React.Ref<HTMLInputElement>,
     style: {
       ...styles?.input,

src/SelectInput/index.tsx

@@ -48,6 +48,8 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   focused?: boolean;
   components: ComponentsConfig;
   children?: React.ReactElement;
+  /** Props passed to the internal input element */
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 const DEFAULT_OMIT_PROPS = [

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(
+      <BaseSelect
+        prefixCls="rc-select"
+        showSearch
+        inputProps={{ spellCheck: false }}
+        OptionList={OptionList}
+        displayValues={[]}
+        emptyOptions
+        id="test"
+        onDisplayValuesChange={() => {}}
+        onSearch={() => {}}
+        searchValue=""
+      />,
+    );
+
+    const input = container.querySelector('input');
+    expect(input?.getAttribute('spellcheck')).toBe('false');
+  });
 });