redux-form-material-ui

redux-form-material-ui copied to clipboard

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`.

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.

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

can anyone post the complete solution please?

+1

+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.

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.

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>
		);
	}
}