erikras / redux-form-material-ui

A set of wrapper components to facilitate using Material UI with Redux Form

---

redux-form-material-ui

---

For material-ui v1-beta support see 5.0 Documentation.

redux-form-material-ui is a set of wrappers to facilitate the use of material-ui components with redux-form.

---

Live Demo 👀

Installation

Using npm:

  $ npm install --save redux-form-material-ui

Available Components

• AutoComplete
• Checkbox
• TimePicker
• DatePicker
• RadioButtonGroup
• SelectField
• Slider
• TextField
• Toggle

Usage

Rather than import your component class from material-ui, import it from redux-form-material-ui and then pass the component class directly to the component prop of Field.

import { reduxForm, Field } from 'redux-form'
import MenuItem from 'material-ui/MenuItem'
import { RadioButton } from 'material-ui/RadioButton'
import {
  Checkbox,
  RadioButtonGroup,
  SelectField,
  TextField,
  Toggle,
  DatePicker
} from 'redux-form-material-ui'

class MyForm extends Component {
  render() {
    return (
      <form>
        <Field name="username" component={TextField} hintText="Street"/>

        <Field name="plan" component={SelectField} hintText="Select a plan">
          <MenuItem value="monthly" primaryText="Monthly"/>
          <MenuItem value="yearly" primaryText="Yearly"/>
          <MenuItem value="lifetime" primaryText="Lifetime"/>
        </Field>

        <Field name="agreeToTerms" component={Checkbox} label="Agree to terms?"/>

        <Field name="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>

        <Field name="receiveEmails" component={Toggle} label="Please spam me!"/>

        <Field name="bestFramework" component={RadioButtonGroup}>
          <RadioButton value="react" label="React"/>
          <RadioButton value="angular" label="Angular"/>
          <RadioButton value="ember" label="Ember"/>
        </Field>
      </form>
    )
  }
}

// Decorate with redux-form
MyForm = reduxForm({
  form: 'myForm'
})(MyForm)

export default MyForm

No Default Values

Because of the strict "controlled component" nature of redux-form, some of the Material UI functionality related to defaulting of values has been disabled e.g. defaultValue, defaultDate, defaultTime, defaultToggled, defaultChecked, etc. If you need a field to be initialized to a certain state, you should use the initialValues API of redux-form.

Instance API

getRenderedComponent()

Returns a reference to the Material UI component that has been rendered. This is useful for calling instance methods on the Material UI components. For example, if you wanted to focus on the username element when your form mounts, you could do:

componentWillMount() {
  this.refs.firstField      // the Field
    .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
    .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
    .focus()                // on TextField
}

as long as you specified a ref and withRef on your Field component.

render() {
  return (
    <form>
      ...
      <Field name="username" component={TextField} withRef ref="firstField"/>
      ...
    </form>
  )
}

redux-form-material-ui's Issues

Cannot tab through SelectField

When mixing vanilla material-ui TextField components with redux-form-material-ui SelectField components, the SelectField's are skipped on keyboard tab.

See below GIF:

Cannot read property 'getRenderedComponent' of undefined

I am trying to get redux-form-material-ui to work with my app.
I basically copied the code from the material-ui demo to see if it worked.
It doesn't.

Here are the files. I have a index.js and a register.js file in components/auth/ directory.

I commented out the errors check, even though I had all the fields filled out, (I was still getting the errors).
The form still won't send.

Can someone please take a look?
I need some suggestions.
Thanks so much

please update docs

"redux-form": "^6.0.0-alpha.15",
"redux-form-material-ui": "^2.0.0",

copied example from readme gives bunch of errors:

Warning: Element: keyis not a prop. Trying to access it will result inundefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

Warning: Element: refis not a prop. Trying to access it will result inundefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

Warning: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Uncaught Invariant Violation: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

running example gives an error on npm install:

    Hash: 5df58aa01ae6cec441a7
    Version: webpack 1.13.1
    Time: 2657ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  85.8 kB       0  [emitted]  main
    bundle.js.map   706 kB       0  [emitted]  main
    [0] multi main 40 bytes {0} [built] [1 error]
    + 298 hidden modules

    ERROR in multi main
    Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index in     mypath/node_modules/redux-form-material-ui/example
     @ multi main

running example from 'Live Demo' throws an error:
reduxForm.js:521Uncaught TypeError: Cannot read property 'wrapped' of undefined

I would appreciate a hint, how to make it work

Example is broken

Changes are not being processed. Maybe this is due to breaking changes in the new rc?

Alden

Autocomplete can only select once.

From your example about Autocomplete in: http://erikras.github.io/redux-form-material-ui/
After I choose one option then I can't choose another one without page refresh.

Update material-ui version

Do you think it will be relevant to update material-ui version to 0.15.2 to get update made on TextField and SelectedItem component ?

Can't use `withRef`

First, this is awesome.

I want to be able to focus a text field if someone hits an "edit" icon. I can't use withRef on the field though since the underlying component is a stateless functional component.

Happy to help translate these to Component

Unknown props 'input', 'meta' on <input> tag

React is throwing an "Unknown" props warning for input and meta props passed to it when using TextField

Using with:

• react 15.3.0
• redux-form 6.0.0-rc.4
• redux-form-material-ui 4.0.1

I haven't tried it with any other versions nor have I tried with any other material-ui component.

Invalid prop `value` of type `string` supplied to `DatePicker`, expected `object`.

Console shows message 'Failed prop type: Invalid prop value of type string supplied to DatePicker, expected object.'
when import DatePicker from 'redux-form-material-ui'.

'redux-form-material-ui' seems force to set the plain value for datepicker,
but the prototype of it only accepts object.

Field breaks vertical stepper animation

When used in a vertical stepper, Field breaks the transition animation between steps. The animation should be:
current step closes upwards
next step opens downwards

what happens:
next step opens downwards
current step closes immediately

Any Field component inside a StepContent component seems to break the animation.

checkbox doesn't show errors

The checkbox should be able to display errors. This will become handy when dealing with the requirement to agree to use terms / agreements for example.

can't seem to set a default value for the datepicker .

I'm passing in values in this.props.initialize() function , the textfield displays it just fine. the values do show up in the form reducer just not in the datePicker field on the page.
Is it because DatePicker requires an object, and redux-form defaults to ''

New props.input needed by Redux Form and React 15.2

With the new breaking change in RF RC2, the createComponent function in RFMUI doesn't work. I can get it going by changing render to use mapProps(this.props.input), but that's going to break all other versions of Redux Form.

I'd submit a PR, but I'm not sure how you want to handle previous versions?

Required SelectField does not show errorText

I noticed in the live demo (http://erikras.github.io/redux-form-material-ui/), the Driver is a required field. When I touch the field and don't select a value, the 'Required' errorText is not showing. Other fields seem to work. I tried my self on my project and same result.

Idea: exporting wrapped components

The flow would then become:

import { WrappedTextField } from 'redux-form-material-ui';

const MyForm = props =>
  <form onSubmit={props.handleSubmit}>
    <Field
      name="username"
      component={WrappedTextField}
      floatingLabelText="Username"
    />
  </form>;

export default reduxForm({
  form: 'myForm',
})(MyForm);

This allows for a better tree shaking with webpack2, is more explicit and less error prone in my opinion (no string component matching).

Assign name to wrapper component. Currently showing as "StatelessComponent"

The name of these wrapper components are appearing as 'StatelessComponent' when viewed in the inspector. That is all.

How to Generate Dynamic Forms & Fields

Can we generate forms and it's fields dynamically with a spec file ... like here redux-form-generator

Issue with withRef and ref

`
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { reduxForm, Field } from 'redux-form';
import MenuItem from 'material-ui/MenuItem';
import { RadioButton } from 'material-ui/RadioButton';
import {
Checkbox,
RadioButtonGroup,
SelectField,
TextField,
Toggle
} from 'redux-form-material-ui';

// Local import(s)
import { getData, updateData } from '../actions';

export const fields = ['first_name']

const validate = values => {
const errors = {}
const requiredFields = [ 'first_name' ]
requiredFields.forEach(field => {
if (!values[ field ]) {
errors[ field ] = 'Required'
}
})
return errors
}

class UserEditForm extends Component {
componentWillMount() {
console.log("this.refs : ", this.refs); // this.refs: {}
this.refs.firstName.getRenderedComponent().getRenderedComponent().focus() // on TextField

  // dispatching action: get Partner-Lead details
  this.props.getData(this.props.user_id);
}

onSubmit(formData) {
  this.props.updateData(this.props.user_id, formData);
}

render() {
  const { 
    fields: {first_name}, 
    pristine,
    handleSubmit, 
    submitting 
  } = this.props

  return (
    <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
      <Field name="first_name" component={TextField} hintText="First Name" floatingLabelText="First Name" ref="firstName" withRef {...first_name}/>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
      </div>
    </form>
  )
}

}

export default reduxForm ({
form: 'UserEditForm',
fields,
validate
}, function mapStateToProps(state) {
return {
initialValues: state.userNode.getResponse,
}
}, {
getData, updateData
})(UserEditForm);
`

• I'm getting following error:
  UserEditForm.js:38 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined
• Please suggest what is the issue here.

[RadioButtonGroup] How to display errors?

Hi,

I couldn't find a way to display errors on a RadioButtonGroup.

For instance, I have a RadioButtonGroup with no default value that is required.
At the moment, user stucks on the submit button without any proper message.

Did any one found a way to display them?

Best regards,

Select field selection stops working on specifying onChange handler on the SelectField

In the example .. Just changed the following:

<Field
            name="driver"
            component={SelectField}
            hintText="Driver"
            **onChange={this.handleSelectChange.bind(this)}**
            floatingLabelText="Driver">
            <MenuItem value="[email protected]" primaryText="Alice"/>
            <MenuItem value="[email protected]" primaryText="Bob"/>
            <MenuItem value="[email protected]" primaryText="Carl"/>
          </Field>

The onChange Handler returns the value as :

handleSelectChange(value) {
    return value
  }

Result : The selected item doesn't update anymore. Any suggestions ?

best practices for intl error messages?

Do you have a hook to translate error messages while rendering the MaterialUI component? I'm using react-intl for internationalization.

When I am using redux-form I can translate the error by having validate return an intl message object to render like this:

<TextField
  errorText={(email.touched && email.error) ? formatMessage(email.error) : '';}
  {...email}
/>

However, with redux-form-material-ui I am supposed to use the Field tag. From my testing it looks like the errorText property of the Field tag is overridden by any error on that field. This makes it impossible to translate an error message outside of the validate function. That function has no state, and no way to access the locale data so I'm wondering what pattern to use to translate error messages. Thank for any tips!

Can't edit any component

When using the latest redux-form-material-ui, my form can't reflect any change.
Do you have any idea?

You can try it here
[https://github.com/anykao/live-guide2]
npm install
npm start

required prop 'fields' not specified using example code

Hi, I'm getting this error:
propType: Required prop fields was not specified in ReduxForm(CreateIncident). Check the render method of Connect(ReduxForm(CreateIncident))
from purely copying and pasting the example code into a class called 'CreateIncident'
Anyone have any idea why this error is being thrown? I assumed the component "Field" was what was specifying the field prop? Thanks

Import/no-unresolved

Hello,

Can import react, material-ui et cetera but only importing redux-form-material-ui is giving me an eslint error.

import { TextField } from 'redux-form-material-ui';

'[eslint] Unable to resolve path to module 'redux-form-material-ui'. (import/no-unresolved)'

I have imported the npm package. My package.json is:
..... "redux": "3.5.2", "redux-form": "^6.0.0-rc.4", "redux-form-material-ui": "^4.0.1", .....

Not sure where to start looking and why only redux-form-material-ui is giving me this eslint error.

Feature suggestion: setting 'active' prop causes field to gain focus

I'm curious about the possibility of having the active prop cause the underlying material-ui component to gain focus. It seems that, when a component gains focus, it calls an onFocus callback that's been handed to it by redux-form. This callback fires a FOCUS action, which results in a state mutation and the active flag being set on the ui component. Could the setting of the active field state, via the reducer plugin, do the reverse and cause the field's focus() method to be called? Right now, messing with the state directly does cause the active prop to be properly set on the ui component. But the component does not translate that into a call to its focus() method, afaik. These wrappers could see the change to the active prop and pass that down to the material ui component via a ref call. mui/material-ui#1594 demonstrates how to set focus on a mui field programmatically.

setting value of component

Hi,
I must be doing something wrong, but when I pass a value to a Field, this value doesn't get passed to the wrapped SelectField component.

Thx in advance,

Olivier Allouch
www.illicotravel.com

Question: Dynamic SelectField's

I have a SelectField whose value should dynamically update another SelectField. I'm using the new v6 syntax, however, I'm unable to get access to the onChange event. Would love a suggestion of how to cleanly implement this. Thank you!

Slider resets when it loses focus

I have a controlled slider (with a state). But it resets to the beginning when it loses the focus, note that the value maintains itself

constructor(props) {
     super(props);
     this.state = {
       salarioSlider: 0
     };
   }

  handleSalarioSlider(value) {
    this.setState({salarioSlider: value});
  }

<Field name="salario" component={Slider}
                      min={0}
                      max={100000}
                      defaultValue={0}
                      step={1000}
                      style={styles.slider}
                      value={this.state.salarioSlider}
                      onChange={this.handleSalarioSlider.bind(this)}
 />
 <div className="texto-slider">{'Bs. ' + this.state.salarioSlider}</div>

Here is a Snapshot

Any thoughts??

lodash.noop Should Be a Dependency

I believe this is a bug:
https://github.com/erikras/redux-form-material-ui/blob/master/package.json#L56

It should be in dependencies, not devDependencies since it's imported here:

redux-form-material-ui/src/AutoComplete.js

Line 2 in c485bb7

import noop from 'lodash.noop'

TextField does not seem to be working inside of a dialog?

I'm not the greatest JS developer but I'm starting work on a React/Redux UI for a Python project I maintain, so please pardon my ignorance if this isn't a problem w/ your code!

I'm trying to get this working using the following dependencies:

  "dependencies": {
    "immutable": "^3.8.1",
    "isomorphic-fetch": "^2.2.1",
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-notification": "^5.0.4",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.4",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "redux-api-middleware": "^1.0.2",
    "redux-form": "^5.2.5",
    "redux-form-material-ui": "^2.0.0",
    "redux-rest-resource": "^0.4.1",
    "redux-thunk": "^2.1.0"
  }

I've got a DeviceForm component that has a FlatButton with text "Create Device" that when clicked opens a Dialog with a form inside. The idea is, you click the button, fill out the form, and then the modal closes.

So, it works fine without the TextField. When I try to add a Field with the component TextField to the form like in your example code, it never renders and I get this in the console.log:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `DeviceForm`.

Here's the entire component called DeviceForm:

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import { Field, reduxForm } from 'redux-form';
import {TextField} from 'redux-form-material-ui';
// import TextField from 'material-ui/TextField';

class DeviceForm extends React.Component {
  constructor(props) {
    super(props);

    // Initial state
    this.state = {
      open: false,
    }

    // Bind methods
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    console.log('DeviceForm.handleOpen()');
    this.setState({open: true});
  }

  handleClose() {
    console.log('DeviceForm.handleClose()');
    this.setState({open: false});
  }

  render() {
    const {
      fields: {hostname},
      handleSubmit,
      pristine,
      resetForm,
      submitting
    } = this.props;

    return (
      <div>
        <RaisedButton label="Create Device" onTouchTap={this.handleOpen} />
        <Dialog
          title="Create Device"
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          I am a a dialog.
          <form onSubmit={handleSubmit}>
            <Field
              name="hostname"
              component={TextField}
              hintText="Hostname"
              floatingLabelText="Hostname"
              required
              defaultValue={hostname.value}
            />
            <FlatButton
              label="Close"
              primary={true}
              onTouchTap={this.handleClose}
            />
            <FlatButton
              label="Create"
              type="submit"
              primary={true}
              keyboardFocused={true}
              disabled={pristine || submitting}
              onTouchTap={this.handleClose}
            />
          </form>

        </Dialog>
      </div>
    );
  }
}
DeviceForm = reduxForm({
  form: 'deviceForm',
  fields: ['hostname']
})(DeviceForm)

export default DeviceForm;

If I remove the Field from the form, the modal pops when I click the "Create Device" button. Any ideas? Is this a bug? Thanks in advance!

Cheers!

Can not type any text in TextField

With below code, i cannot type anything on the textfield. I mean to say nothing gets type in the textfield. Autocomplete works though. Why is it not showing the text i have typed?

What might be the reason for this issue? Have i done somewhere mistake?

import React, { Component } from 'react';
import _ from 'lodash';

import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

import {
    AutoComplete as MUIAutoComplete, MenuItem,
    FlatButton, RaisedButton,
 } from 'material-ui';

import {
  AutoComplete,
  TextField
} from 'redux-form-material-ui';

const validate = values => {
  const errors = {};
  const requiredFields = ['deviceName', 'deviceIcon', 'deviceTimeout'];
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required';
    }
});
  return errors;
};

class DeviceName extends Component {

  handleSubmit = (e) => {
      e.preventDefault();
      this.props.handleNext();
  }

  render() {
      const {
          handleSubmit,
          fetchIcon,
          stepIndex,
          handlePrev,
          pristine,
          submitting
      } = this.props;
      const listOfIcon = _.map(fetchIcon.icons, (icon) => ({
                                text: icon.name,
                                id: icon.id,
                                value:
                                <MenuItem
                                  primaryText={icon.name}
                                  leftIcon={
                                          <i className="material-icons md-23">
                                              {icon.name}
                                          </i>
                                          }
                                />
                      }));
    return (
        <div className="device-name-form">
            <form>
                <div>
                    <Field
                        name="deviceName"
                        component={TextField}
                        floatingLabelStyle={{ color: '#1ab394' }}
                        hintText="Device Name"
                        onChange={(e) => this.setState({ deviceName: e.target.name })}
                    />
                </div>
                <div>
                    <Field
                        name="deviceIcon"
                        component={AutoComplete}
                        hintText="icon"
                        openOnFocus
                        filter={MUIAutoComplete.fuzzyFilter}
                        className="autocomplete"
                        dataSource={listOfIcon}
                        onNewRequest={(e) => { this.setState({ deviceIcon: e.id }); }}
                    />
                </div>
                <div>
                    <Field
                        name="deviceTimeout"
                        component={TextField}
                        floatingLabelStyle={{ color: '#1ab394' }}
                        hintText="Device Timeout"
                        ref="deviceTimeout" withRef
                        onChange={(e) => this.setState({ deviceTimeout: e.target.name })}
                    />
                </div>
                <div style={{ marginTop: 12 }}>
                  <FlatButton
                    label="Back"
                    className="back-btn"
                    onTouchTap={() => handlePrev()}
                    style={{ marginRight: 12 }}
                  />
                  <RaisedButton
                    label={stepIndex === 4 ? 'Finish' : 'Next'}
                    primary
                    disabled={pristine || submitting}
                    className="our-btn"
                    onTouchTap={(e) => handleSubmit(e)}
                  />
                </div>
            </form>
        </div>
    );
  }
}

const mapStateToProps = ({ fetchIcon }) => ({
    fetchIcon
});

const DeviceForm = reduxForm({
  form: 'DeviceForm',
  validate,
})(DeviceName);

export default connect(mapStateToProps)(DeviceForm);```

Prop "format" for TimePicker component interfere with Field components prop

To set the format for the TimePicker we use the format prop like this
<TimePicker format="24hr" />

How to set prop format when using the Field component?

<Field name="some_name" component={TimePicker} format="24hr" />
This is not working because the Field component already has a prop called format.

DatePicker: Invalid prop value of type string

This is how I'm using the DatePicker component:
<Field name="date" component={DatePicker} hintText="Pick a Date" />

Getting this error:

Failed prop type: Invalid prop `value` of type `string` supplied to `DatePicker`, expected `object`.
    in DatePicker (created by ReduxFormMaterialUIDatePicker)

Error with TextField

Hi, I've just import { TextField } from 'redux-form-material-ui'; and got this error createComponent.js:55 Uncaught TypeError: Cannot read property 'name' of undefined

I never get this error before but today I got it don't know why.

AutoComplete dataSourceConfig for object array.

Hi. It appears that redux-form-material-ui doesn't support the dataSourceConfig Prop on the AutoComplete component.

I have an array of objects e.g:
const datasource = [ { code: 'USD', description: 'United States Dollar' }, { code: 'GBP', description: 'United Kingdom Pound' } ];

and a dataSourceConfig:

const dsConfig = {
text: 'description',
value: 'code'
};

Is support for this in the pipeline?

Many thanks.

SelectField onChange event

I can't manage to add an onChange to SelectField, it seems to be ignored.

DatePicker looses value upon reopening

Right now, if you select a date, the text field is filled with the selected value. As soon as you open the date picker again, it switches to blank and the date picker shows no selected date.

If you compare this to the behaviour of the bare MUI date picker, you will see that the selected date is still in the field and the selected date is marked in the date picker.

For debugging, I tried to use MUI with redux-form directly and it boiled down that this starts to happen if you add the onBlur/onFocus callbacks. Unfortunately, without this callback the dirty/touched tracking does not work.

Any ideas?

Radio button problem

Hello, I am having trouble to set value to radio button programmatically.

I am able to dispatch a change action for radio buttons the same way as nickbarry in his post here redux-form/redux-form#369

I am also able to see that Redux store value has been succesfully changed, in redux dev tools in chrome.

My problem is that Radio Button Group component on my page is not reflecting this change.
I tried similar thing for a TextBox and it worked as I expected.

I am still quite fresh to React and Redux, but I think following could be related problem - when you call reset on a form, Radio buttons are not resetted for material design wrappers but for normal Radio buttons reset works. Here is example that does not work for radio buttons. http://erikras.github.io/redux-form-material-ui/

Could the reason be that mapping for onchange is missing in the wrapper, or something?

Thanks!

TextField, Toggle lag on user interaction

At a reasonable typing speed, the TextField seems to lag keyboard input. I don't observe this behavior with vanilla material-ui TextField components.

Example JSX:

import {Field} from 'redux-form';
import {TextField as TextFieldRX} from 'redux-form-material-ui';

<Field
  name="myField"
  component={TextFieldRX}
  floatingLabelFixed={true}
  floatingLabelText="myField"
/>

package versions:

{
    "material-ui": "0.15.2",
    "react": "15.2.1",
    "redux": "3.5.2",
    "redux-form": "^6.0.0-rc.3",
    "redux-form-material-ui": "^3.0.0"
}

Edit: Observing this with other components as well, such as Toggle. See the below GIF to observe the lag effect.

Cannot find module "material-ui/RadioButton"

I have this code:

import { Field, reduxForm } from 'redux-form/immutable';
import { TextField } from 'redux-form-material-ui';

and I use react-boilerplate. After building and opening page in browser I get the next error:

Cannot find module "material-ui/RadioButton"

I just tried to import TextField and got this issue.

Maybe it is somehow related with this issue?

Checkbox Multiselect Feature

Is there a recommended way of having the value of a field as an array and using checkboxes to populate the array?

For example, in the live demo you have toppings like pepperoni, mushroom, ham etc. and these are all just fields with separate names. However, if one wanted to have the value of these stored in an array under a separate key, 'toppings', what's the way to do this?

I'm basically wanting to replicate a HTML checkbox input like:

<input type="checkbox" name="toppings[]" value="mushrooms">
<input type="checkbox" name="toppings[]" value="pepperoni">

any way to override the style of each components?

Just wondering, any possible solution to override the style of the component?

for instance, override the style of TextField?

SelectField not selecting upon change

I have following:

const mapDispatchToProps = dispatch => {
  return {
    selectTruck: id => {
      dispatch(change(formName, 'truckId', id));
    }
  };
};

'truckId' is bound to a SelectField (a Field with component={SelectField}).

When a certain event happens I call this.props.selectTruck(id). The event changes the form value as expected. I know this because the value is there upon submitting the form. Also the label floats, which indicates an option is chosen.

However the select appears blank. The display value of the truck does not appear. Why isn't the field showing the selected option? Do I need to do something else besides change the value?

Is this even a redux-form-material-ui issue?

v3 passes through bogus props to <input>, causing React to warn

The new version fixes #10, but caused react to start warning of unexpected props passed to <input>:

This is because material-ui passes through unexpected props to the underlying <input> element. I think the fix is to black-list non-standard props from being passed through to material UI:

• active
• asyncValidating
• dirty
• invalid
• pristine
• valid
• visited

SelectField default value display issue

Hi,

When testing the SelectField example, I don't get the same display.

<Field
            name="driver"
            component={SelectField}
            hintText="Driver"
            floatingLabelText="Driver">
            <MenuItem value="[email protected]" primaryText="Alice"/>
            <MenuItem value="[email protected]" primaryText="Bob"/>
            <MenuItem value="[email protected]" primaryText="Carl"/>
</Field>

The first option's primaryText and the floatingLabelText overlap:

Using
"redux-form": "6.0.0-rc.4",
"redux-form-material-ui": "4.0.1"

Am I the only one?

Error in 2.1.0 index.js Unable to resolve some modules 'TogglTextFieldcke'

After npm updating to 2.1.0 we have the following error:

Unable to resolve some modules:

  "./TogglTextFieldcke" in ...../node_modules/redux-form-material-ui/lib/index.js
(web.browser)

Reverting to 2.0.0 solves issue.

Looks like it's supposed to be Toggle but possibly messed up in transpiling.

Issue with Timepicker in 4.1.0

          <Field name="at"
            component={TimePicker}
            defaultValue={null}
            hintText="At what time?"/>

warning.js:36 Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `TimePicker`, expected `object`.

TimePicker not working

I have a form with one TimePicker field, like so:

<form>
    <Field
        name='start_time'
        component={TimePicker}
    />
</form>

And I get this warning:
Warning: Failed prop type: Required prop component was not specified in Field.

Followed by this error:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ConnectedField.

If I change the component prop to DatePicker, it works fine.

unable to add a custom action after selecting radion button from radioGroup ?

i want to make my custom action along with state updation when radio buttion is selected from radioGroup.
<Field name={id} component={RadioButtonGroup} onChange={this.handleRadioSelect}>
{radioButtons}
</Field>
when i write onChange event listener redux form state is not updating ?

Datepicker can't display error/required messages

The majority of the components are able to display error/required messages via the import mapError from './map' statement, except for poor old DatePicker. It's never able to display an error message as the props are never mapped.