I'm trying to implement my own Grid based on this example. But when I edit a row, the current value in the dropdown menu disappears. When I click on the dropdown to reveal the other items, I can see them but when I try selecting picking an item, my app crashes and the console has this message - Uncaught Error: Material-UI: the 'value' property is required when using the 'Select' component with 'native=false'.
So my understanding is that the value for the Select component is not being set both initially during edit and also when it's onChange event executes.
My {rows} look like this
[
{
"email": "test@domain.tld",
"id": "5a5c26f4c54d2d0366fa801b",
"name": "Test",
"token": "User-sdf84r89fwer",
"user_type": {
"id": "5a5c25dbc54d2d0366fa801a",
"name": "Admin",
"permissions": {
"lists": {
"create": false,
"delete": false,
"read": false,
"update": false
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
}
}
]
And my {columns} like this
[
{ name: 'name', title: 'Name' },
{ name: 'email', title: 'Email ID' },
{
name: 'user_type',
title: 'User Type',
getCellValue: row => (row.user_type ? row.user_type.name : undefined)
},
]
These render properly the first time. The user_type column is what I'm trying to populate with dropdown values. The user_types array looks like this out of which I only use the name and id properties.
[
{
"id": "5a5f6aadc54d2d269c0700ce",
"name": "Admin",
"permissions": {
"lists": {
"create": true,
"delete": true,
"read": true,
"update": true
},
"phases": {
"create": true,
"delete": true,
"read": true,
"update": true
}
},
"token": "UserType-k32k4kl9sdmfmk"
},
{
"id": "5a5f6c44c54d2d269c0700cf",
"name": "Moderator",
"permissions": {
"lists": {
"create": true,
"delete": true,
"read": true,
"update": true
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
},
{
"id": "5a5f6cbbc54d2d269c0700d1",
"name": "Guest",
"permissions": {
"lists": {
"create": false,
"delete": false,
"read": true,
"update": false
},
"phases": {
"create": false,
"delete": false,
"read": false,
"update": false
}
},
"token": "UserType-k32k4kl9sdmfmk"
}
]
And finally based on the example, I pass the user_types as props to LookUpEditCellBase and use it like this,
const LookupEditCellBase = ({
userTypes, value, onValueChange, classes,
}) => (
<TableCell
className={classes.lookupEditCell}
>
<Select
value={value}
onChange={event => onValueChange(event.target.value)}
input={
<Input
classes={{ root: classes.inputRoot }}
/>
}
>
{userTypes.map(item => (
<MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
))}
</Select>
</TableCell>
);
Any idea what might be causing the Select field to not be able to read the value on edit and onChange? Every other piece is pretty much the same as the example. Been stumped for quite sometime now so any sort of help will be great!
