Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bylly1 opened this issue Apr 11, 2025 · 1 comment
Open

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

bylly1 opened this issue Apr 11, 2025 · 1 comment
Labels
component: text field This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information

Comments

@bylly1
Copy link

bylly1 commented Apr 11, 2025

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

@bylly1 bylly1 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 11, 2025
@zannager zannager added the component: text field This is the name of the generic UI component, not the React module! label Apr 11, 2025
@ZeeshanTamboli
Copy link
Member

Please provide a reproduction in the form of CodeSandbox or StackBlitz. This StackBlitz template is a good starting point: https://stackblitz.com/edit/stackblitz-starters-ebpxdrvo.

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

4 participants