need help: [useFieldArray]- unexpected behaviour

[niralivasoya]

Version Number

^7.45.1

Codesandbox/Expo snack

Steps to reproduce

I am attaching my code here:

import Divider from '@/components/Divider';
import FormComponentTitle from '@/components/FormComponentTitle';
import NoInputBox from '@/components/NoInputBox';
import TextInput from '@/components/formComponents/TextInput';
import SpaceDetailForm from '@/components/forms/SpaceDetailForm';
import SpaceDetailModal from '@/components/modals/SpaceDetailModal';
import NoInputBoxImage from '@/images/NoInputBox.png';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { SpaceType } from 'a-lib';
import { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import StepHeaderText from '../StepHeaderText';

const StepSpaceTypes = () => {
    const { control, getValues } = useFormContext();
    const [spaceDetails, setSpaceDetails] = useState([]);

    useEffect(() => {
        setSpaceDetails(getValues('inputOCCalibration.spaceTypes.spaceType'));
    }, [getValues]);

    console.log('spaceDetails: ', spaceDetails);

    return (
        <section>
            <StepHeaderText title='Space types' subTitleText='Lorem Ipsum dolor sit' />

            <div>
                <div>
                    <FormComponentTitle className='mb-6' title='Bedrooms in the Building' icon={<InfoOutlinedIcon />} />

                    <div className='flex gap-4'>
                        <TextInput
                            name='inputOCCalibration.spaceTypes.numberOfOneBedroom'
                            control={control}
                            label='Number of 1 BR'
                        />
                        <TextInput
                            name='inputOCCalibration.spaceTypes.numberOfTwoBedrooms'
                            control={control}
                            label='Number of 2 BR'
                        />
                        <TextInput
                            name='inputOCCalibration.spaceTypes.numberOfThreePlusBedrooms'
                            control={control}
                            label='Number of 3 BR'
                        />
                    </div>
                </div>

                <Divider className='my-6' />

                {/* Spaces */}
                <div>
                    <div className='flex justify-between w-full mb-6'>
                        <span className='font-semibold text-base'>Spaces</span>
                        <SpaceDetailModal action='add' />
                    </div>

                    <div className='flex flex-col w-full flex-grow-0 gap-6'>
                        {spaceDetails && spaceDetails.length > 0 ? (
                            spaceDetails.map((detail: SpaceType, index: number) => {
                                return (
                                    <div
                                        key={index}
                                        className='p-6 rounded-lg border-[1px] border-solid border-neutrals-100'
                                    >
                                        <SpaceDetailForm isDisplayOnly={true} />
                                    </div>
                                );
                            })
                        ) : (
                            <div className='p-16'>
                                <NoInputBox imageSrc={NoInputBoxImage} text='Add a Space' />
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default StepSpaceTypes;

In this code, when I click on the +space it will open the modal and this is the modal container code

import AddIcon from '@mui/icons-material/Add';
import CloseIcon from '@mui/icons-material/Close';
import EditIcon from '@mui/icons-material/Edit';
import { IconButton, Modal, Tooltip } from '@mui/material';
import { SpaceType } from 'a-lib';
import { useState } from 'react';
import StyledButtonMUI from '../StyledButtonMUI';
import SpaceDetailForm from '../forms/SpaceDetailForm';

type ModalPropsTypes = {
    action?: string;
};

const SpaceDetailModal = ({ action }: ModalPropsTypes) => {
    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            {action === 'add' ? (
                <StyledButtonMUI
                    className='text-xs px-2.5'
                    variant='contained'
                    customProp='space'
                    onClick={handleOpen}
                    startIcon={<AddIcon sx={{ height: '18px', width: '18px' }} />}
                />
            ) : (
                <Tooltip title='Edit'>
                    <IconButton onClick={handleOpen}>
                        <EditIcon />
                    </IconButton>
                </Tooltip>
            )}

            <Modal open={open} onClose={handleClose}>
                <div className='modal-container'>
                    <div className='flex items-center justify-between mb-4'>
                        <span className='text-3xl block'> Space Details</span>
                        <IconButton onClick={handleClose}>
                            <CloseIcon className='text-neutrals-600' />
                        </IconButton>
                    </div>

                    {action === 'add' ? (
                        <SpaceDetailForm handleClose={handleClose} action='add' />
                    ) : (
                        <SpaceDetailForm handleClose={handleClose} action='edit' />
                    )}
                </div>
            </Modal>
        </div>
    );
};

export default SpaceDetailModal;

and here is the twist, I have created the common component for the form because I am using this component to display the detail of whatever user entered in it.

this is the code for the form(it's not form just named it as form). This one part of the nested big form.

import { spaceProgramNameOptions } from '@/helper/selectOptions';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { SpaceType } from 'a-lib';
import { useFieldArray, useFormContext } from 'react-hook-form';
import StyledButtonMUI from '../StyledButtonMUI';
import CustomCheckBoxMUI from '../formComponents/CustomCheckBoxMUI';
import SelectInput from '../formComponents/SelectInput';
import TextInput from '../formComponents/TextInput';
import SpaceDetailModal from '../modals/SpaceDetailModal';

type Props = {
    handleClose?: () => void;
    isDisplayOnly?: boolean;
    action?: string;
    data?: SpaceType;
};

const SpaceDetailForm = ({ handleClose, isDisplayOnly, action, data }: Props) => {
    const { control, getValues } = useFormContext();
    const { fields, append, remove } = useFieldArray({ name: 'inputOCCalibration.spaceTypes.spaceType' });

    const handleSaveClick = () => {
        if (action === 'add') {
            append(getValues('inputOCCalibration.spaceTypes.spaceType'));

            // TODO: Add data
        } else if (action === 'edit') {
            // TODO: edit
        }

        if (handleClose) handleClose();
    };

    const handleClickDelete = () => {
        // TODO: Delete
    };

    return (
        <section>
            <div className='grid grid-cols-2 gap-x-8 gap-y-6'>
                <SelectInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.name`}
                    label='Program Type'
                    disabled={isDisplayOnly}
                    options={spaceProgramNameOptions}
                />
                <div></div>
                <CustomCheckBoxMUI
                    name={`inputOCCalibration.spaceTypes.spaceType.isTenant`}
                    control={control}
                    label='Tenant Owned'
                    sx={{ color: '#434343', fontSize: 10 }}
                    disabled={isDisplayOnly}
                />
                <div></div>
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.lpd`}
                    label='LPD'
                    disabled={isDisplayOnly}
                />
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.ventilationRatePerPerson`}
                    label='Ventilation/Person'
                    disabled={isDisplayOnly}
                />
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.epd`}
                    label='EPD'
                    disabled={isDisplayOnly}
                />
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.ventilationRatePerArea`}
                    label='Ventilation/Areas'
                    disabled={isDisplayOnly}
                />
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.occupantDensity`}
                    label='Occupant Density'
                    disabled={isDisplayOnly}
                />
                <TextInput
                    control={control}
                    name={`inputOCCalibration.spaceTypes.spaceType.ventilationPerSuite`}
                    label='Ventilation/Suite'
                    disabled={isDisplayOnly}
                />
            </div>

            <div className='flex justify-end mt-5'>
                {isDisplayOnly ? (
                    <div className='flex gap-0.5'>
                        <SpaceDetailModal action='edit' />
                        <Tooltip title='Delete'>
                            <IconButton onClick={handleClickDelete}>
                                <DeleteIcon />
                            </IconButton>
                        </Tooltip>
                    </div>
                ) : (
                    <StyledButtonMUI
                        customProp={action === 'add' ? 'save' : 'edit'}
                        variant='contained'
                        onClick={handleSaveClick}
                    />
                )}
            </div>
        </section>
    );
};

export default SpaceDetailForm;

here how can I handle the spaceDetailData array using the useFieldArray, I tried to use it but it behaves wrong here.

Expected behaviour

This is the Form UI:

and this is how it should look after adding the array of details:

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[niralivasoya]

@jorisre can you please look into it? Thank you.