Skip to content

TextField SlotProps types doesn't have support for inputProps #45881

Open
@bylly1

Description

@bylly1

Steps to reproduce

Steps:

  1. Open this link to live example: (required)

Current behavior

I'm trying to pass tabIndex: -1 to Autocomplete TextField but slotProps types not contain inputProps

This is my code

type CustomAutocompleteProps<
    TData,
    Multiple extends boolean | undefined,
    DisableClearable extends boolean | undefined,
    FreeSolo extends boolean | undefined
> = Omit<AutocompleteProps<TData, Multiple, DisableClearable, FreeSolo>, 'renderInput'> & {
  textFieldProps?: Omit<TextFieldProps, 'label' | 'placeholder' | 'error'>;
}

const CustomAutocomplete = <
>(
 props: CustomAutocompleteProps<TData, Multiple, DisableClearable, FreeSolo>
) => {
   const { textFieldProps, ..rest } = props;
   return (
     <Autocomplete 
         {...rest}
         renderInput={(params) => (
                <TextField
                    {...textFieldProps}
                    {...params}
                    slotProps={{
                        ...textFieldProps?.slotProps,
                        input: {
                            ...params.InputProps,
                            endAdornment: (
                                <>
                                    {props.loading ? (
                                        <CircularProgress
                                            color="inherit"
                                            size={20}
                                        />
                                    ) : null}
                                    {params.InputProps.endAdornment}
                                </>
                            ),
                            inputProps: {
                                ...params.inputProps,
                                ...textFieldProps?.slotProps?.input?.inputProps // here not working
                            },
                        },
                    }}
                />
            )}
     />
   )
}

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: TextField SlotProps

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: text fieldThis is the name of the generic UI component, not the React module!status: waiting for authorIssue with insufficient information

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions