[Select] Throwing a value undefined error in latest 5.6.1

[wadehammes]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I think this is related to changes in #27299, I am getting an error that value is undefined:

TypeError: arr[0].props is undefined

Expected behavior 🤔

Should work as it does in 5.6.0

Steps to reproduce 🕹

https://codesandbox.io/s/icy-framework-72ywid?file=/src/Demo.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.18.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @mui/base:  5.0.0-alpha.76 
    @mui/material: ^5.6.1 => 5.6.1 
    @mui/private-theming:  5.6.1 
    @mui/styled-engine-sc: ^5.6.1 => 5.0.0-rc.1 (5.6.1)
    @mui/system:  5.6.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @types/react:  17.0.35 
    react: ^18.0.0 => 18.0.0 
    react-dom: ^18.0.0 => 18.0.0 
    styled-components: 5.3.5 => 5.3.5 
    typescript: ^4.6.3 => 4.6.3 

[hbjORbj]

Hi.

Thanks for the report. It indeed seems like a regression from the change in #27299 .
I started a thread here.

In the meantime, you can remove {defaultMessage && <MenuItem value="All">{defaultMessage}</MenuItem>} from Select component and instead use a defaultValue prop.

Here is a working solution: https://codesandbox.io/s/suspicious-hooks-v87vwp?file=/src/RhSelect.component.tsx:1378-1447

[wadehammes]

Hi.

Thanks for the report. It indeed seems like a regression from the change in #27299 . I started a thread here.

In the meantime, you can remove {defaultMessage && <MenuItem value="All">{defaultMessage}</MenuItem>} from Select component and instead use a defaultValue prop.

Here is a working solution: https://codesandbox.io/s/suspicious-hooks-v87vwp?file=/src/RhSelect.component.tsx:1378-1447

Ill update my side to use the defaultValue, thank you!

[michaldudak]

Let me chip in here - this crashes is more or less expected as Select receives an empty string as its first child. Select should have only MenuItem, ListSubheader, option or optgroup as children. In your example, when defaultMessage is not provided, it defaults to '' and {defaultMessage && <MenuItem value="All">{defaultMessage}</MenuItem>} evaluates to ''. The easiest way to fix it while retaining the existing markup would be to cast defaultMessage to a boolean: {!!defaultMessage && <MenuItem value="All">{defaultMessage}</MenuItem>}.

Nevertheless, we may add a guard checking if elements have the proper type to prevent such mistakes.

[boutahlilsoufiane]

Hi @hbjORbj @michaldudak, I will work on this!

[boutahlilsoufiane]

Hi @michaldudak, could please review the PR! thanks!