[material-ui][Select] "Property 'muiName' does not exist" on Select

[joshkel]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-dttfff?file=Demo.tsx

Steps:

1. Create a custom Select-based component.
2. Assign Select.muiName to the custom component's muiName, as described at https://mui.com/material-ui/guides/composition/#wrapping-components.

Current behavior

TypeScript error:

Property 'muiName' does not exist on type '<Value = unknown>(props: SelectProps) => Element & { muiName: string; }'. ts(2339)

Expected behavior

Successful compilation.

Context

Wrap a Select component, as described at https://mui.com/material-ui/guides/composition/#wrapping-components.

This issue was apparently introduced by #39137; it changed the type of Select from

(<Value>(props: SelectProps<Value>) => JSX.Element) & { muiName: string; }

("a function that returns a JSX.Element and also has a muiName prop") to

function Select<Value>(props: SelectProps<Value>): JSX.Element & { muiName: string; }

("a function that returns a JSX.Element that has a muiName prop").

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Edge: 123.0.2420.65
    Safari: 17.4.1
  npmPackages:
    @emotion/react:  11.11.4
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.29
    @mui/core-downloads-tracker:  5.15.14
    @mui/icons-material:  5.15.14
    @mui/lab:  5.0.0-alpha.158
    @mui/material:  5.15.14
    @mui/private-theming:  5.15.2
    @mui/styled-engine:  5.15.2
    @mui/system:  5.15.14
    @mui/types:  7.2.11
    @mui/utils:  5.15.2
    @mui/x-date-pickers:  6.0.4
    @mui/x-tree-view:  6.17.0
    @types/react: ^18.2.73 => 18.2.73
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.4.3 => 5.4.3

Search keywords: Select muiName

[ZeeshanTamboli]

Thanks for reporting. It's a bug. We can do:

--- a/packages/mui-material/src/Select/Select.d.ts
+++ b/packages/mui-material/src/Select/Select.d.ts
@@ -193,8 +193,8 @@ export type SelectProps<Value = unknown> =
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-export default function Select<Value = unknown>(
-  props: SelectProps<Value>,
-): JSX.Element & {
+declare const Select: (<Value>(props: SelectProps<Value>) => JSX.Element) & {
   muiName: string;
 };
+
+export default Select;
diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx
index 78f69c76c6..fff7930690 100644
--- a/packages/mui-material/src/Select/Select.spec.tsx
+++ b/packages/mui-material/src/Select/Select.spec.tsx
@@ -196,3 +196,6 @@ const AppSelect = <T extends string>(props: Props<T>) => {
     </Select>
   );
 };
+
+// test for applying Select's static muiName property type to wrapper components.
+AppSelect.muiName = Select.muiName;

Would you like to create a PR?

[EyaOuenniche]

hello,
I would like to create a pr and work on it if no one is working on this issue.

[ZeeshanTamboli]

@EyaOuenniche Feel free to!

[EyaOuenniche]

Thank you !