2

I'm trying to integrate react-bootstrap-autosuggest library while using redux form. Unfortunately, the first change event to the component wrapped with redux form makes that particular component lose focus instantly. So, a user would need to click on the field again to continue typing. Otherwise, it is working as expected. Any thoughts on cause/remedies?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import { Field, reduxForm } from 'redux-form';
import { Modal } from 'react-bootstrap';
import Autosuggest from 'react-bootstrap-autosuggest'


class ComplaintModalForm extends Component {

  close() {
    this.props.actions.hideModal();
  }

  handleFormSubmit(formProps) {
    this.props.actions.submitComplaint(formProps);
  }

  render(){
    const { handleSubmit } = this.props;

    const show = this.props.modalType ? true : false;

    const RenderTypes = ({input, meta: {touched, error} }) => (
      <div>
        <Autosuggest
          datalist={[ 'Type_1', 'Type_2', 'Type_3' ]}
          {...input}
        />
        {touched && error && <span>{error}</span>}
      </div>
    );

    return(
      <div>
        <Modal show={show} onHide={() => this.close()}>
          <Modal.Header closeButton>
            <Modal.Title>Create Complaint</Modal.Title>
              </Modal.Header>
              <Modal.Body>
              <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

              ...

              <div className="form-group">
                <label htmlFor="complaint_type">Type</label>
                <Field className="form-control" name="complaint_type" component={RenderTypes} type="text"/>
              </div>

              ...

              <button type="button" className="btn btn-primary btn-md btn-block">Submit</button>
            </form>
          </Modal.Body>
        </Modal>
      </div>
    )
  }
}

const ComplaintModalFormTemp = reduxForm({
  form: 'ComplaintModalForm',
})(ComplaintModalForm);

function mapStateToProps(state) {
  return {
    modal: state.modal,
    ... 
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ComplaintModalFormTemp)
lgants
  • 3,665
  • 3
  • 22
  • 33
  • Possible duplicate of [In react JS fields losing focus after first onChange](https://stackoverflow.com/questions/46172141/in-react-js-fields-losing-focus-after-first-onchange) – gustavohenke Oct 10 '17 at 17:58
  • I wrote about this problem here: https://stackoverflow.com/a/52453665/10178669 – so5tmaker Sep 22 '18 at 08:38

0 Answers0