Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding onFocus to an input element doesn't focus and swallows first click when clicking on an element

See original GitHub issue

The gif below shows the issue. If you notice after adding onFocus={input.onFocus} it takes longer to focus the input text element and this is because I have to click twice.

Code individuals.js

import React, {PropTypes} from "react"
import {Field, reduxForm, FieldArray} from 'redux-form'
import Individual from './Individual'
import {DropdownList} from 'react-widgets'
import {DateField} from 'react-date-picker'

const Individuals = ({fields}) => {
  const renderField = ({input, label, type, meta: {touched, error}}) => 
  <div>
      <label>{label}</label>
      <div>
        <input
          value={input.value}
          onChange={input.onChange}
          onBlur={input.onBlur}
          onFocus={input.onFocus}
          type={type}
          placeholder={label}/>
        {touched && error && <span>{error}</span>}
      </div>
    </div>

  return (
    <div>
      <ul>
        <li>
          <button type="button" onClick={() => fields.push({})}>Add Spouse or Child</button>
        </li>
        {fields && fields.map((individual, index) =>
          <li key={index}>
            <button
              type="button"
              onClick={() => fields.remove(index)}>Remove Individual
            </button>

            <Field
              name={individual + '.firstName'}
              type="text"
              component={renderField}
              label="First Name"/>
            -----------------------------------------------------

          </li>
        )}
      </ul>
    </div>)
}

Individuals.propTypes = {
  fields: PropTypes.object
}

export default Individuals

the above code is called by this code

import React, {PropTypes} from 'react'
import {reduxForm, FieldArray} from 'redux-form'
import Individuals from './Individuals'


let MyNeeds = ({handleSubmit, onMyNeedsFormSubmit}) => {
  return (
    <div>
      <form onSubmit={handleSubmit(onMyNeedsFormSubmit)}>
        <h1>I need coverage for</h1>
        <FieldArray name='individuals' component={Individuals}/>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

MyNeeds.propTypes = {}

const validate = values => {
  const errors = {}
  return errors
}


export default MyNeeds = reduxForm({
    form: "myNeedsForm",
    validate
  }
)(MyNeeds)

Screen Capture reduxformfocusissue