Modal & redux-form doesn't work : focus lose.

[GreGGus]

Hey, I'm using Modal to show some Forms with redux-form.
Everything is working good, but one thing have weird behavior : focus on fields after typing first char.

When user write the first char in any input (Semantic Input or html5 input), we loose focus on this same field.

I made an simple redux-form => working perfectly.
I put this exactly same form inside simple modal => focus bug.

import React, { Component } from 'react'
import {Field, reduxForm} from "redux-form"
import {Modal,Button,Input,Form} from 'semantic-ui-react'


  customInput = ({icon, placeholder, input, label, type, meta: { touched, error, warning}}) => (
    <Form.Field>
      <label> {label} </label>
      <Input fluid value={input.value} onChange={input.onChange} type={type} placeholder={label}/>
      </Form.Field>
  )

const ModalForm = (props) => {
    <Modal
        on="click"
        trigger={<Button>ShowModal</Button>}>
        <Modal.Content>
          <Form onSubmit={props.handleSubmit}>
            <div>
              <label
                htmlFor="firstName"> firstName
              </label>
              <Field name="firstName" component={customInput}  />
            </div>
            <div>
              <label
                htmlFor="secondName"> lastName
              </label>
              <Field name="secondName" component={customInput}/>

            </div>
          </Form>
          </Modal.Content>
          <Modal.Actions>
            <button type="submit"> Submit </button>
            </Modal.Actions>
      </Modal>
)


export default reduxForm({
  form:'ModalForm',
  onSubmit: (values, dispatch, props) => {
    dispatch("")
  }
})(ModalForm)

In this example, my form is connected with my redux-store. It's working, but there's still focus issue.
If I remove Modal => it's working.

Thanks for your helps.

[levithomason]

What version are you using? Can you post a codepen.io example for debugging?

[GreGGus]

"react-redux": "^4.4.6".
"semantic-ui-react": "^0.64.3".
"redux-form": "^6.5.0",
"redux": "^3.6.0",

I'm sorry I have no idea how to use codepen with React/ReduxForm & Semantic ... Do you have Codepen boilerplate ?

[levithomason]

Yes, please take a moment to read the issue template as it is included in there along with other good info for posting issues:

http://codepen.io/levithomason/pen/ZpBaJX

[dvdzkwsk]

Not an expert on either this component or redux-form, but this is generally caused by redux-form tracking specific component instances, and when those instances are recreated it loses track of what's what. Haven't actually checked a repro out yet, but food for thought for the two of you; not sure who (SUIR or RF or some combination) is at fault here, but that's probably a good starting point.

[levithomason]

Appears redux-form has issues with managing focus both currently and in the past. Perhaps one of these can help you:

Open

input lose focus #2129

FieldArray will lose the first focus from dispatch(initialize(initFieldArrayData)) after inputting #2079

Closed

Form input gets unfocused after typing in 1 character. #1853

[6.0.1] Dependent Input Field loses focus #1672

Fields losing focus on change/blur, Form Re Registering fields #1609

input field loses focus on first form input character #1571

Input loses focus after a single "keyDown" event #1557

v6 proposal regarding loss of focus when stateless functions are passed to Field and Fields #1555

[v6] fields losing focus after first onChange #1094

v6 (alpha 9): Some input fields lose focus after typing #961

Focus lost on redux form input #481

[rafaelrozon]

I had a similar problem: form in modal was being cleared whenever I resized the window. I fixed it by adding:

{ destroyOnUnmount: false }

and passing it to reduxForm. I think the component was being unmounted and then reseting the state.

I hope it helps.