form.reset

[usmankhanXislabs]

I am working on a React-based customer form component where a user can create or edit customer details, including assigning customer groups using a MultiSelect component. The data for customerGroupList is fetched from an API, and the selected groups are dynamically mapped to the form.

The issue is that when editing a customer, the selectedGroups array is sometimes empty, even though the customerForEdit.customerGroup contains valid data. This results in the form not pre-filling the MultiSelect with the correct options.

'use client';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useSelector, useDispatch } from 'react-redux';
import * as customersActions from '../../app/redux/cutomers/cutomersActions';
import { useCustomerGroupList } from '@/config/customerGroupsSearchHook';
import { MultiSelect } from '../multi-select';

export const CustomerForm: React.FC = () => {
const dispatch = useDispatch();
const { customerGroupList } = useCustomerGroupList();
const [selectedCustomerGroups, setSelectedCustomerGroups] = useState<string[]>([]);

const form = useForm({
defaultValues: {
_id: '',
name: '',
email: '',
address: '',
mobile: '',
zip: '',
businessName: '',
customerGroup: [],
},
});

const {
customers: { customerForEdit },
}: any = useSelector((state: RootState) => ({
customers: state.customers,
}));

useEffect(() => {
if (customerForEdit && customerForEdit?._id) {
const selectedGroups = customerGroupList.filter((group) =>
customerForEdit.customerGroup.includes(group.value)
);

  const updatedData = {
    _id: customerForEdit._id,
    name: customerForEdit.name,
    address: customerForEdit.address,
    businessName: customerForEdit.businessName,
    zip: customerForEdit.zip,
    mobile: customerForEdit.mobile,
    email: customerForEdit.email,
    customerGroup: selectedGroups.map((item) => item.value),
  };

  form.reset(updatedData);
  setSelectedCustomerGroups(updatedData.customerGroup);
} else {
  form.reset({
    _id: '',
    name: '',
    email: '',
    address: '',
    mobile: '',
    zip: '',
    businessName: '',
    customerGroup: [],
  });
}

}, [customerForEdit, customerGroupList]);

const onSubmit = async (data) => {
const updatedData = {
...data,
customerGroup: selectedCustomerGroups,
};
console.log('Form submitted:', updatedData);
};

return (

{/* Other fields */}

Submit

);
};

[s3f5]

Don't think its a Multiselect issue, might be more a form state thing. Please share a repo or a sandbox to reproduce.