Redux-form: Using onBlur with React.js and Redux Form

[lomberas]

I am trying to close a textarea field when a user clicks out of the form. I am working with React.js, Redux, and Redux-Form

This is handleBlur and closeCardForm :
canvasSection.jsx

closeCardForm: function () {
    this.setState({cardFormShowing: false})
    this.cardSectionClass = "canvas-section-card-closed";
  },
handleBlur: function () {
    this.closeCardForm()
  },
cardForm: function () {
    return (
      this.state.cardFormShowing ? 
        <CardForm 
          key={this.props.sectionNo} 
          formKey={this.props.sectionNo.toString()}
          onSubmit={this.handleSubmit}
          closeCardForm={this.closeCardForm}
          onBlur={this.handleBlur}
            /> : null
    )
  }, 

cardForm.jsx

export const CardFormDumb = React.createClass({
  propTypes: {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired
  },

 render() {
    const { fields: {title, canvasSection} } = this.props;
    return (
      <div className="card-form-container" id={this.props.formKey}>
        <div className="card-form-close-icon" onClick={this.props.closeCardForm}/>
        <form className="form" ref="form" >
          <textarea onKeyDown={this.handleKeyDown} onBlur={this.props.closeCardForm} className="form-input" ref="title" type="textarea"  data-autosize-input='{ "space": 40 }'  {...title}/>
        </form>
      </div>
    );
  }
})

I am trying to use React's Focus Events onBlur to call the closeCardForm() but it does not work. I suspect it might be conflicting with Redux's form onBlur feature. I want to also point out that they are on different files. Thank you.

[erikras]

Your problem is...

<textarea
  onKeyDown={this.handleKeyDown}
  onBlur={this.props.closeCardForm} // <---- This is being overridden by...
  className="form-input"
  ref="title"
  type="textarea"
  data-autosize-input='{ "space": 40 }'
  {...title}/>                      // <---- THIS

title.onBlur is overriding your previous prop. The easiest thing to do would be to put your onBlur after the {...title}, but if you want to use redux-form's focus tracking (perhaps you don't), you will need to call both:

<textarea
  onKeyDown={this.handleKeyDown}
  className="form-input"
  ref="title"
  type="textarea"
  data-autosize-input='{ "space": 40 }'
  {...title}
  onBlur={event => {
    title.onBlur(event);
    this.props.closeCardForm();
  }}/>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.