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

Created on 22 Feb 2017 · 6Comments · Source: Semantic-Org/Semantic-UI-React

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.

Source

GreGGus

Most helpful comment

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.

rafaelrozon on 15 Aug 2017

👍3

All 6 comments

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

levithomason on 22 Feb 2017

"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 ?

GreGGus on 23 Feb 2017

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

levithomason on 24 Feb 2017

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.