Formik: HOC and formik losing focus

[jorgetejeda]

❓Question

I created a bootstrap form input component in which if you submit an icon, it will change it as a HOC component. the input is validated by Formik

<InputUi placeholder="Digite su correo" name="email" onChange={formik.handleChange} onBlur={formik.handleBlur} values={formik.values.email} touched={formik.touched.email} errors={formik.errors.email} autoComplete="on" icon={<FontAwesomeIcon icon={faLock} />} />

Component structure

<React.Fragment> <Wraper> {label && <Form.Label>{label}</Form.Label>} <Form.Control type={type} placeholder={placeholder} name={name} className={className} size={size} onChange={onChange} onBlur={onBlur} autoComplete={autoComplete} defaultValue={value} style={styleInput} /> </Wraper> {touched && errors ? ( <div className="w-100 error-message">{errors}</div> ) : null} {hint && <Form.Text muted>{hint}</Form.Text>} </React.Fragment>

HOC - the issue is here, where for any reason formik lose the focus

const Wraper = ({ children }) => { return icon ? (<InputIconGroup children={children} />) : (<FormGroup children={children}/>)};

i wanna know alternatives to fix this without create two component to render an input if they have icon or not

Complete code here for test

Seriously, for immediate help, just ask your question on the #formik channel on Reactiflux.

[clflowers5]

Your issue is creating a new Component in the render function of InputUi - you generally shouldn't do that.
Pull FormGroup and InputIconGroup out of the InputUi Component, make them independent.

This isn't a pretty example, but it should illustrate the solution. https://codesandbox.io/s/vibrant-allen-rr8jt

[jorgetejeda]

ufff! Thank you man