[material-ui][TextField] slotProps.htmlInput.component does not replace input html element

[balazs-zsoldos]

Steps to reproduce

The following works and replaces the wrapper div of the input element:

<TextField slotProps={{ input: { component: () => <div>Hello world</div> } }} />

The following does not work:

<TextField slotProps={{ htmlInput: { component: () => <div>Hello world</div> } }} />

Current behavior

Does not replace the element in the rendered component.

Expected behavior

Replaces the <input element in the rendered component.

Context

I would like to put a link instead of the html element in the component, so I can keep other e.g.: shrinked label, so the link will fit with the other fields in the form.

Your environment

npx @mui/envinfo

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

Search keywords: htmlinput

[sai6855]

@balazs-zsoldos use slots.htmlInput to replace wrapper around htmlInput

Paste below code here for working demo

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  return (
    <Box
      component="form"
      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
      noValidate
      autoComplete="off"
    >
      <TextField slots={{htmlInput:()=><div>hello</div>}} id="outlined-basic" label="Outlined" variant="outlined" />
    
    </Box>
  );
}

component prop is not supported in htmlInput. I believe the reason TypeScript doesn't throw a type error is that, currently, InputBaseComponentProps accepts any string.

current:

material-ui/packages/mui-material/src/InputBase/InputBase.d.ts

Lines 245 to 250 in e720f3b

	export interface InputBaseComponentProps
	extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
	// Accommodate arbitrary additional props coming from the `inputProps` prop
	[arbitrary: string]: any;
	}

Updating the InputBaseComponentProps type as shown below will cause TypeScript to throw an error when the component prop is passed to htmlInput. cc @DiegoAndai @ZeeshanTamboli wdyt, should i make this change?

Post change:

export interface InputBaseComponentProps
  extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
  // Accommodate arbitrary additional props coming from the `inputProps` prop
  [arbitrary: string]: any;
  component?: never;
}

[DiegoAndai]

Hey, @balazs-zsoldos, thanks for the report. As @sai6855 explained, this is expected as the HTML input element does not accept a component prop/attribute. Did the provided example work for you?

@sai6855 I wouldn't change this type at this moment.

[balazs-zsoldos]

@DiegoAndai @sai6855 Thanks for the clarification. All clear now.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@balazs-zsoldos How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.