[TextField] Unable to extend `TextFieldProps` for type customisation.

[rishavpandey43]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I want to add extra functionality on the native Mui TextField component, and thus need to extend the native TextFieldProps and add extra types.

import { TextFieldProps } from '@mui/material';

export interface CustomTextFieldProps as TextFieldProps {
  label?: string;
  subLabel?: string;
  tooltip?: string;
};

I'm able to do it for other components, but TextFieldProps getting the following error.

If I try the following code 👇, everything’s working as expected. But TextFieldProps should be extendible like other component props.

import { TextFieldProps } from '@mui/material';

export type CustomTextFieldProps = TextFieldProps & {
  label?: string;
  subLabel?: string;
  tooltip?: string;
};

Expected behavior 🤔

TextFieldProps should be extendible the same as other components props, as in documentation for reference only a few examples are given and thus it's expected that all the components will perform the same behavior which is being violated here again.

I tried extending other components Props and it's working fine and as expected but only failing for TextFieldProps.

Steps to reproduce 🕹

Steps:

1. run https://codesandbox.io/s/mui-textfieldprops-interface-issue-kndlgc and open the live code sample.
2. Follow the instructions added as comments to comment/uncomment some lines to replicate the issue.

Context 🔦

I want to create the custom TextField and thus need to leverage existing TextFieldProps to extend and create CustomTextFieldProps required as per my use-case.

I'm able to do this with other components like Chip | Button | IconButton | Box, but it's only failing with the TextField component.

I assume, somehow TextFieldProps has not been created with an interface like other component props have been created.

Below are the screenshots on how I'm extending other component props -

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 12.3.1 Binaries: Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 8.8.0 - ~/.nvm/versions/node/v14.18.2/bin/npm Browsers: Chrome: 100.0.4896.127 Edge: Not Found Firefox: Not Found Safari: 15.4 npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.78 @mui/icons-material: ^5.6.2 => 5.6.2 @mui/lab: ^5.0.0-alpha.79 => 5.0.0-alpha.79 @mui/material: ^5.6.3 => 5.6.3 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/system: 5.6.3 @mui/types: 7.1.3 @mui/utils: 5.6.1 @mui/x-date-pickers: 5.0.0-alpha.0 @types/react: ^18.0.0 => 18.0.8 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 typescript: ^4.4.2 => 4.6.3 Browser used: Google Chrome ```

tsconfig configuration

``` { "compilerOptions": { "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": [ "es6", "dom" ], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true } } ```

[hbjORbj]

Instead of using interface and extends,

export interface CustomTextFieldProps extends TextFieldProps {
  subLabel?: string;
  tooltip?: string;
};

you can use type and & as follows:

export type CustomTextFieldProps = {
  subLabel?: string;
  tooltip?: string;
} & TextFieldProps;

Here is a working solution: https://codesandbox.io/s/mui-textfieldprops-interface-issue-forked-s0nyd9

[github-actions[bot]]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[rishavpandey43]

@hbjORbj Above solution is not going to work, I've already mentioned that I can use intersections and create a new type definition, but It's not the solution.

I'm creating a storybook with Mui, and It's reorganizing all the props used in other components but for TextField it's unable to do since TextFieldProps can't be extended.

TextFieldProps should be extendible same as other component props, like ChipProps, ButtonProps, and IconButtonProps

TextField props only showing few controls, since TextFieldProps is of Type alias

for Example, all Button props are visible in storybook as controls-

I can extend other component props interfaces, but TextFieldProps is not being extended -

Storybook in its documentation says it needs type-definition to set controls

[mstosio]

Any update on this?

export interface TextFieldProps extends StandardTextFieldProps, FilledTextFieldProps, OutlinedTextFieldProps,

I tried to extend it like this but it doesnt work either.

TS2320: Interface 'TextFieldProps' cannot simultaneously extend types 'StandardTextFieldProps' and 'FilledTextFieldProps'.   Named property 'variant' of types 'StandardTextFieldProps' and 'FilledTextFieldProps' are not identical.

[rishavpandey43]

@hbjORbj Haven't got any explanation with the issue and this issue is closed.

is this the way, reported issues are replied to?

[mike-holm-percipient]

I'm also experiencing this issue