Redux-form-material-ui: helperText prop on Select component

[mgenov]

Component is rendered but when some of the items is selected app crashes with:

eact does not recognize the `helperText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `helpertext` instead.

Example

  <FormControl>
            <InputLabel htmlFor="driver">Driver</InputLabel>
            <Field
              name="driver"
              component={Select}
              placeholder="Driver"
              autoWidth={true}
              validate={required}
            >
              <MenuItem value="[email protected]">Alice</MenuItem>
              <MenuItem value="[email protected]">Bob</MenuItem>
              <MenuItem value="[email protected]">Carl</MenuItem>
            </Field>
          </FormControl>

Tested version is: 5.0.0-beta.2

[thehig]

I managed to solve this with the following code snippet, which removes the error property (which ultimately ends up causing this helperText attribute.

It then re-adds the error text into a FormHelperText, and applies the Boolean equivalent (!!error) to mark the MUISelect and the FormHelperText as in an error state.

https://material-ui-next.com/demos/selects/ is the only place I've seen FormControl used like this, so if I should be putting props on it, or alternately setting error on it instead of the children, then please let me know

import { FormControl, FormHelperText } from "material-ui/Form";
import { Select as MUISelect } from "redux-form-material-ui";

const selectWrapper = ({ meta: { error }, ...others }) => (
  <FormControl>
    {error && (
      <FormHelperText htmlFor="form-selector" error={!!error}>
        {error}
      </FormHelperText>
    )}
    <MUISelect {...others} error={!!error} id="form-selector" />
  </FormControl>
);

[mgenov]

This snippet is taken from the example project: https://github.com/erikras/redux-form-material-ui/blob/5.0/example/src/Form.js#L65.

If you have a working example without this usage of FormControl I'll be happy to hear it.

Thanks for your feedback.

[thehig]

This is what I've come up with:

import { FormHelperText } from "material-ui/Form";
import { InputLabel } from "material-ui/Input";
import { Select } from "redux-form-material-ui";

const renderSelect = ({ meta: { touched, error }, ...props, label }) => (
  <div>
    {label && <InputLabel htmlFor='render-select' error={Boolean(touched && error)}>{label}</InputLabel>}
    <Select {...props} error={Boolean(error && touched)} id='render-select'/>
    {(touched && error) && <FormHelperText htmlFor='render-select' error>{error}</FormHelperText>}
  </div>
);

I believe that helperText issue is coming from https://github.com/erikras/redux-form-material-ui/blob/5.0/src/mapError.js#L13

[mihirsoni]

@thehig Is the helperText passing down to DOM is an issue then this fix will not help it will also pass down.

[thehig]

The helper text is being generated whenever an error is passed in. By removing the passed in error prop, the helper text is not auto generated and the issue is avoided.

[kaleem-elahi]

same here

[keeth]

The MUI Select component does not support helperText, so the Select wrapper in this package is broken in this regard. However TextField has a 'select mode' that renders a Select with additional goodies like FormHelperText.

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

<Field name="foo" component={TextField} select>
  <option value="bar">bar</option>
</Field>

Additional props can be passed to the Select via SelectProps, e.g. SelectProps={{native: true}}

Easy, right?

Note: the PR mentioned above does not address the issue at all, and breaks error display for all components in this package. I don't know why it was merged.

[thehig]

I had so many issues like this that I ended up not using this library at all (mainly caused by version churn in material-ui@next), instead creating my own version of some MUI components bound with redux-form. The components are hosted in a Storybook on Github Pages here from stories here with source here for anyone interested.

[mingca]

same issue

[cindyloo]

yeah this is causing some pain here as well

[jhonnymoreira]

@keeth I know it has been a while since you posted your solution, but thanks a lot! It solved my problem!

[davnicwil]

@keeth thanks so much for this tip on the select mode of TextField - I see we're a year on since you made the comment and I'm quite surprised to see this is still the case even in the latest version of MUI. Seems like a pretty counter-intuitive design choice - I definitely wouldn't have found it without your tip here, so thanks!