Grouped TextField select: value becomes undefined onChange
See original GitHub issueWhen you wrap ListSubheader
& MenuItem
s inside <TextField select />
in an element, like div
, the value is lost (=undefined) on the next onChange
.
- The issue is present in the latest release.
- 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:
- open the example above
- change the select value
- see error
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.8.0 |
React | 16.8.4 |
Browser | firefox 71 |
TypeScript | 3.3.3 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Grouped TextField select: value becomes undefined onChange
When you wrap ListSubheader & MenuItems inside in an element, like div, the value is lost (=undefined) on the next onChange.
Read more >Material-UI Select e.target.value is undefined - Stack Overflow
The reason e.target.value was returning undefined was, as others mentioned, due to the fact that MenuItem wasn't a direct child of Select ....
Read more >Forms - React
An input form element whose value is controlled by React in this way is called a “controlled component”. For example, if we want...
Read more >Form Select | Components - BootstrapVue
Custom component using cross-browser custom styles. Optionally generate entries based on an array, array of objects.
Read more >Form - Examples - Components - Atlassian Design System
Any component with a value and onChange handler can be a field. The component renders inside a field and adds an entry to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
You have to apply the value prop on the outer most element, this is related to #14943.