redux form material ui autocomplete validation

Question

Hello to the whole community. I am writing a react app using a npm module 'redux-form-material-ui' regarding to docs redux-form-material-ui And ran into the problem, how to validate a autocomplete component. Is there the right way to do it ?

Answer 1

I have managed with an autocomplete validation, but it is not the best way. Because I had to edit redux-form/es/ConnectedField.js. A problem is after onBlur on the autocomplete field an event not triggered which I passed to the <Field> component. I found in the redux-form/es/ConnectedField.js that onBlur, onChange and a few other events replaced by redux-form native events. I added some code in the redux-form/es/ConnectedField.js

        if (withRef) {
          custom.ref = 'renderedComponent';
        }

        // my changes
        if (onBlur) {
            custom.onBlur = onBlur;
        }
        // end my changes

        if (typeof component === 'string') {
          var input = props.input,
              meta = props.meta; // eslint-disable-line no-unused-vars

this is my client code:

  import React, {Component, PropTypes} from 'react'
    import { Field } from 'redux-form'

    import TextField from 'material-ui/TextField'
    import { AutoComplete as MUIAutoComplete } from 'material-ui'
    import { AutoComplete, Checkbox } from 'redux-form-material-ui'

    import validators from './../../validators/validators'
    import countries from './../../lists/countries'
    import BaseForm from './abstracts/BaseForm'

    import style from './../../css/forms.css' 
    import commonStyle from './../../css/common.css' 

    export default class RegistrationForm extends BaseForm 
    {
        constructor(props) {
            super(props)
        }

        render() {
            const {pristine, submitting, valid, handleSubmit, reset} = this.props;

            const fields = ([
                 <Field name="country_name" 
                       component={AutoComplete}
                       floatingLabelText="Country"
                       filter={MUIAutoComplete.fuzzyFilter}
                       maxSearchResults={15}
                       dataSourceConfig={{
                           text: 'name',
                           value: 'code',
                       }}
                       dataSource={countries.getData()}
                       normalize={this.normalizeCountry}
                       validate={[
                           validators.required,
                           validators.byCountryCode(countries),
                       ]}
                       ref="countryName"
                       withRef
                       onBlur={this.validateCountry.bind(this)}
                 />,
                <div>
                    <button type="submit" 
                            disabled={!valid}
                            className={valid ? '' : commonStyle['disabled']}
                        >Submit</button>
                    <button type="button"
                            disabled={pristine || submitting}
                            className={
                                pristine || submitting ? commonStyle['disabled'] : ''
                            }
                            onClick={reset}
                    >Reset</button>
                </div>,
            ])

            return (
                <form onSubmit={handleSubmit}>
                    {fields.map((node, key) => (
                        <div key={key} className={style['form-row']}>
                            {node}
                        </div> 
                    ))}
                </form>
            )
        }

        validateCountry(event) {
            let value = this.refs
                           .countryName
                           .getRenderedComponent()
                           .getRenderedComponent()
                           .refs
                           .searchTextField
                           .input
                           .value;

            let code = countries.getCode(value);

            if (!code) {
                this.props.blur('country_name', value);
            } else {
                this.props.change('country_name', code);
            }
        }
    }

At now onBlur passed to the <Field> component works fine. But I hope an author of redux-form will fix this issue or suggest better way to solve it