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

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.

[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.

[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