React Material UI + Formik FieldArray Autocomplete control value stays same on remove

Question

I want use Formik's form validation and it actually works just fine, but I ran into some issues with selected value display in Autocomplete component. I Have created Add/Remove buttons to dynamically adjust how many rows are in my form. The bug occurs when I try to remove form row, the row below, behind scenes has proper values as displayed in DEBUG, but user's input displays value from deleted form row. I cannot figure out, how to display or handle this occurrence. Form before removal, Form after removal

<FieldArray name="actions"
        render={arrayHelpers =>
            values.actions.map((action, index) => (
                <Grid item container spacing={1} justify="center" alignItems="center"
                        key={index}>
                    <Grid item xs={4}>
                        <Field
                            error={getIn(errors, `actions.${index}.suggestedAction`) &&
                            getIn(touched, `actions.${index}.suggestedAction`)}
                            helperText={<ErrorMessage
                                name={`actions.${index}.suggestedAction`}/>}
                            name={`actions.${index}.suggestedAction`}
                            id={`actions.${index}.suggestedAction`}
                            variant="outlined"
                            fullWidth
                            as={TextField}
                            label="Siūloma priemonė"
                            multiline
                            rows={3}
                            rowsMax={10}
                        />
                    </Grid>
                    <Grid item xs={4}>
                        <Autocomplete
                            freeSolo
                            onBlur={handleBlur}
                            onChange={(e, value) => {
                                //If adding new
                                if (value && value.inputValue) {
                                    setOpen(true);
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.inputValue)
                                } else if (value && value.id) {
                                    //Selecting existing
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.id)
                                } else {
                                    setFieldValue(`actions.${index}.responsiblePerson`, "")
                                }
                            }}
                            getOptionLabel={(option) => {
                                if (typeof option === 'string') {
                                    return option;
                                }
                                if (option.inputValue) {
                                    return option.inputValue;
                                }
                                return option.title;
                            }}
                            handleHomeEndKeys
                            clearText="Pašalinti"
                            noOptionsText="Tuščia..."
                            renderOption={option => option.title}
                            filterOptions={(options, params) => {
                                const filtered = filter(options, params);
                                if (params.inputValue !== '') {
                                    filtered.push({
                                        inputValue: params.inputValue,
                                        title: `Pridėti "${params.inputValue}"`,
                                    });
                                }
                                return filtered;
                            }}
                            renderInput={params => (
                                <TextField
                                    {...params}
                                    id={`actions.${index}.responsiblePerson`}
                                    name={`actions.${index}.responsiblePerson`}
                                    error={getIn(errors, `actions.${index}.responsiblePerson`) &&
                                    getIn(touched, `actions.${index}.responsiblePerson`)}
                                    helperText={<ErrorMessage
                                        name={`actions.${index}.responsiblePerson`}/>}
                                    onChange={handleChange}
                                    variant="outlined"
                                    label="Atsakingas asmuo"
                                    placeholder="Vardenis Pavardenis"
                                />
                            )}
                            options={top100Films}/>
                    </Grid>
                    <DateTimeUtilsProvider>
                        <Grid item xs={3}>
                            <Field
                                disableToolbar
                                as={KeyboardDatePicker}
                                variant="inline"
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                id={`actions.${index}.deadline`}
                                name={`actions.${index}.deadline`}
                                error={getIn(errors, `actions.${index}.deadline`) &&
                                getIn(touched, `actions.${index}.deadline`)}
                                helperText={<ErrorMessage
                                    name={`actions.${index}.deadline`}/>}
                                label="Įvykdymo terminas"
                                onChange={value =>
                                    setFieldValue(`actions.${index}.deadline`, value)}
                            />
                        </Grid>
                    </DateTimeUtilsProvider>
                    <Grid item xs={1}>
                        <ButtonGroup fullWidth orientation="vertical" size="medium">
                            <Button onClick={() => {
                                arrayHelpers.remove(index);
                            }}
                                    disabled={values.actions.length === 1}
                                    classes={removeButtonClasses}>
                                <HighlightOff/>
                            </Button>
                            <Button onClick={() => {
                                arrayHelpers.insert(index + 1, {
                                    suggestedAction: "",
                                    responsiblePerson: "",
                                    deadline: Date.now()
                                })
                            }}
                                    color="primary">
                                <AddCircleOutline/>
                            </Button>
                        </ButtonGroup>
                    </Grid>
                </Grid>
            ))
        }
/>
</Grid>

score 0 · Answer 1 · answered Dec 14 '20 at 21:30

0

Instead of

arrayHelpers.insert()

I have used

arrayHelpers.push()

and its working fine for me.

answered Dec 14 '20 at 21:30

Harshil Patel

26
3

score 0 · Answer 2 · answered Jan 07 '21 at 21:59

I had this same problem. I was setting a value prop on the <Field> inside my renderInput.

<Autocomplete
  renderInput={params => (
    <Field {...params} component={TextField} value={values.myArray[index]} />
  )}
/>

I was able to fix it by moving the value attribute to the Autocomplete.

<Autocomplete
  value={values.myArray[index]}
  renderInput={params => (
    <Field {...params} component={TextField} />
  )}
  ...
/>

score 0 · Answer 3 · answered Feb 07 '23 at 07:50

This worked for me

const arrayValue = options.filter(
(item) => item.id === values[arrayName][index][name]);

And then I used the filtered option as my value in the Autocomplete component

<Autocomplete
    name={name}
    value={arrayValue.length > 0 ? arrayValue[0] : null}
    options={options}
    groupBy={(option) => option.group}
    getOptionLabel={(option) => option.value}
    isOptionEqualToValue={(option, value) => option?.id === value?.id}
    defaultValue={defaultValueCheck()}
    onChange={(_, value) => {
      setFieldValue(`${arrayName}[${index}].${name}`, value?.id ?? "");
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        {...configTextField}
        name={`${arrayName}[${index}].${name}`}
      />
    )}
    renderGroup={(params) => (
      <li key={params.key}>
        <GroupHeader>{params.group}</GroupHeader>
        <GroupItems>{params.children}</GroupItems>
      </li>
    )}
  />
</>

React Material UI + Formik FieldArray Autocomplete control value stays same on remove

3 Answers3