Material-ui: Grouped TextField select: value becomes undefined onChange

[akomm]

When you wrap ListSubheader & MenuItems inside <TextField select /> in an element, like div, the value is lost (=undefined) on the next onChange.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

You are not allowed to use react fragments and when you use an element to dynamically map to a single root, value becomes undefined onChange.

Expected Behavior 🤔

It should be possible to either use fragment or wrap the above components in another element.

Steps to Reproduce 🕹

https://codesandbox.io/s/wizardly-snowflake-l7lu4

Steps:

1. open the example above
2. change the select value
3. see error

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.8.0 |
| React | 16.8.4 |
| Browser | firefox 71 |
| TypeScript | 3.3.3 |

[oliviertassinari]

You have to apply the value prop on the outer most element, this is related to #14943.

[akomm]

It does not make sense to do so on 1. a div (value prop does not exist) and 2. using grouping, because there are multiple possible values.

So this basically means, dynamically grouping is not possible?

[oliviertassinari]

@akomm You can add an intermediary component do ignore the value prop from the outer element (the div). Dynamic grouping is possible, as long as you keep a flat array, like in the existing demo.

[akomm]

Thanks.

The example did not really help, as it uses static definitions, not dynamic.

But I figured it out now myself - no intermediary component needed (also no dead value).

For those, who might seek for the solution: https://codesandbox.io/s/silly-mclaren-k7qul

[oliviertassinari]

Thanks for sharing, this would be perfect on StackOverflow.