Redux-form-material-ui: [Next] meterial-ui Select has input props

[jeongsd]

hi material-ui Select has input props so it break with redux-from Field input props
https://material-ui-1dab0.firebaseapp.com/api/select/

<FormControl>
  <InputLabel htmlFor="age-simple">Age</InputLabel>
  <Field
    name="age"
    component={Select}
    input={<Input id="age-simple" />}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Field>
</FormControl>

SelectInput.js:256 Uncaught Error: Material-UI: the `value` property is required when using the `Select` component with `native=false`.

[KrzysztofKarol]

It's because redux-form or redux-form-material-ui has already input prop
Select.js

export default createComponent(Select, ({
  input: { onChange, value, onBlur, ...inputProps },
  onChange: onChangeFromField,
  defaultValue,
  ...props
}) => ({
// ...

So I tried with

export default createComponent(Select, ({
  inputField: input,
  input: { onChange, value, onBlur, ...inputProps },
  onChange: onChangeFromField,
  defaultValue,
  ...props
}) => ({
  ...mapError(props),
  ...inputProps,
  value: value,
  input: input,
  // ...

and

<Field
  name="age"
  component={Select}
  inputField={<Input id="age-simple" />}
>

It works if you build with react 16.1 but lags and throws Uncaught RangeError: Maximum call stack size exceeded.

[JarLowrey]

I had this issue when upgrading to material-ui@next. The callback of onChange has been changed from 3 to 1 parameters, so I was setting Select's value to undefined and causing a crash. Update the callback to have 1 param, event, and set the state value to event.target.value

[jahglow]

can anyone post the complete solution please?

[thomasgbereczky]

+1

[uiucjcwhite]

+2. I've tried for quite some time to get this to work. I have the same uncaught exception. I say
value={this.state.gender} yet still says value is required.

[uiucjcwhite]

Got it :) Make sure the state property that you are specifying as the value is set to something before you use it in this case. So in my example above,

value={this.state.gender hadn't been set yet in the code (I mean this is what this Select was for duh)
So on opening the component that is the parent of the Select, I set the state to (shortened) this.setState({gender : ''); and then everyone is happy! Think of the MenuItem as a switch statement for the Select.

[artem-solovev]

Here is my solution

import * as React from 'react';
import { SelectProps } from '@material-ui/core';
import { WrappedFieldProps } from 'redux-form';
import MUISelect from '@material-ui/core/Select';

export default class Select extends React.PureComponent<IProps> {
    render(): JSX.Element {
        const {
            id,
            children,
            labelId,
            defaultValue,
            value,
            onChange,
            disabled,
        } = this.props;

        return (
            <MUISelect
                id={id}
                labelId={labelId}
                value={value}
                onChange={onChange}
                disabled={disabled}
                defaultValue={defaultValue}
            >
                {children}
            </MUISelect>
        );
    }
}