In react JS fields losing focus after first onChan

Question

I am using redux-form But When I am start typing focus goes out first time in react.

In my component below, the input field loses focus after typing a character. While using Chrome's Inspector, it looks like the whole form is being re-rendered instead of just the value attribute of the input field when typing.

Please see below code:

<Field
        name='description'
       // onChange={this.handleChange.bind(this)}
        //value={this.state.description}
        component={props => {
          return (
            <MentionTextArea  {...props} userTags={userTags} tags={postTags}/> 
          )
        }}

MentionTextArea Component:

import React, {Component, PropTypes} from 'react'
import { MentionsInput, Mention } from 'react-mentions'
import defaultStyle from './defaultStyle'

class MentionTextArea extends Component {
    constructor(props) {
        super(prop)
    }
    handleOnChange (e) {
        this.props.input.onChange(e.target.value); 
    }
    render() {
       // const { input, meta, ...rest } = this.props;
        return (
            <MentionsInput 
                value={this.props.input.value || ''}
                onChange={this.handleOnChange.bind(this)}
                singleLine={false}
                style={ defaultStyle }
                markup="@[__display__](__type__:__id__)"
                >
                   <Mention trigger="@"
                        data={this.props.userTags}
                        type="userTags"
                        style={{ backgroundColor: '#d1c4e9' }}
                        renderSuggestion={ (suggestion, search, highlightedDisplay) => (
                            <div className="user">
                                { highlightedDisplay }
                            </div>
                        )}
                    />
                    <Mention trigger="#"
                        data={this.props.tags}
                        type="tags"
                        style={{ backgroundColor: '#d1c4e9' }}
                        renderSuggestion={ (suggestion, search, highlightedDisplay) => (
                            <div className="user">
                                { highlightedDisplay }
                            </div>
                        )}
                    />
            </MentionsInput>
        );
    }
}

export default MentionTextArea

Please help!

Thanks in advance,

Answer 1

It's common problem for people new to redux-form please check this issue you'll find an answer there.

You must define the stateless function outside of your render() method, or else it will be recreated on every render and will force the Field to rerender because its component prop will be different. Example from official redux-form documentation:

// outside your render() method
const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error && 
       <span className="error">{field.meta.error}</span>}
    </div>
  )

// inside your render() method
<Field name="myField" component={renderField}/>