2

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 ?

1
  • Can you provide some code please ? Commented May 2, 2017 at 7:08

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.