When used with formik's <Field /> component, ChipInput losing focus after adding a chip

[chaitanya1019]

I've tried to use ChipInput Component with formik's Component in the following way,

<FieldArray
                  name="skills"
                  render={arrayHelpers => (
                    
                      <Field
                        name="skills"
                        component={({ field, form }) => (
                          <ChipInput
                            name="skills"
                            type="text"
                            label="Skills"
                            helperText={
                              errors.skills && touched.skills
                                ? errors.skills
                                : ""
                            }
                            value={values.skills}
                            InputLabelProps={{
                              classes: {
                                root: classes.cssLabel,
                                focused: classes.cssFocused
                              }
                            }}
                            InputProps={{
                              classes: {
                                underline: classes.cssUnderline
                              }
                            }}
                            error={
                              errors.skills && touched.skills ? true : false
                            }
                            margin="none"
                            onAdd={chip => arrayHelpers.push(chip)}
                            onDelete={chip => arrayHelpers.remove(chip)}
                            fullWidth
                          />
                        )}
                      />
                  )}
                />

After entering some text in input box and pressing enter, input is losing focus, and to add new chips to the input either we have to click on the input or click tab and navigate through all the entered chips.
If it's not clear, will add a sandbox soon.

[leMaik]

No need to manually add the chip on blur. You can do the same thing with blurBehavior="add". That said, I don't know why Formik has problems, delayBeforeAdd might help.

A sandbox would be great. 👍

[el1f]

Turns out this is caused by the fact that with this configuration the field is treated as an uncontrolled field because of value={values.skills} being undefined, therefore calling the onChange method instead of the onAdd and onRemove.
Easily fixable by setting the initial value as an empty array in Formik :)

P.S. it's not needed to provide the name prop to all of the items, just put it in the FieldArray prop

[foxCanFly]

@chaitanya1019 you should use render method of Formik Field. Using component you just creating another component each time which means your ChipInput component mounted each time the input props are changed.