Clearing selected options once click the Submit button

[shafrazlk]

Is there anyway to clear the selected options once click on the Submit button?

[s3f5]

Yea, just clear/reset defaultValues prop after submit - but you will need this one #47

[seadawy]

clear the state of the defaultValues but you have to add this to the component

 React.useEffect(() => {
            if (defaultValue.length === 0) {
                handleClear();
            }
        }, [defaultValue]);

[shafrazlk]

Sorry for the late reply, the solution worked for me but it started triggering below error

[seadawy]

Use logs to see when the component rerendrs and is the problem from the component or parent

[shafrazlk]

it looks like from the component itself, as soon as the below code block added.

React.useEffect(() => {
            if (defaultValue.length === 0) {
                handleClear();
            }
        }, [defaultValue]);

anyway I am not 100% confident since am new to React. So posting my parent component code below for any help.

import FHComboboxField from "@/components/fh/fh-combobox";
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import {
    FormField,
    FormItem,
    FormControl,
    FormMessage,
    FormLabel,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MultiSelect } from "@/components/ui/multi-select";
import {
    Controller,
    UseFormReturn,
    useFieldArray,
    useForm,
} from "react-hook-form";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { CirclePlus, Trash2 } from "lucide-react";

import formSchema from "@/schema/job-card-schema";
import { z } from "zod";
import { FHComboItem, PageProps } from "@/types";
import useFetchData from "@/hooks/use-fetch-data";
import { usePage } from "@inertiajs/react";
import FormHiddenInput from "@/components/fh/fh-form-hidden-input";
import FormTextInput from "@/components/fh/fh-form-text-input";

interface ServicesFormProps {
    form: UseFormReturn<z.infer<typeof formSchema>>;
}

interface MultiSelectOption {
    label: string;
    value: string;
    icon?: React.ComponentType<{ className?: string }>;
}

const ServiceDetailForm: React.FC<ServicesFormProps> = ({
    form,
}: ServicesFormProps) => {
    const { companyServices }: any = usePage<PageProps>().props;
    const { fields, append, remove } = useFieldArray({
        control: form.control,
        name: "job_card_items",
    });

    const [selectedCategory, setSelectedCategory] = useState<number | null>(
        null
    );
    const [selectedMaterial, setSelectedMaterial] = useState<number | null>(
        null
    );
    const [selectedServiceTypes, setSelectedServiceTypes] = useState<string[]>(
        []
    );

    const [materialOptions, setMaterialOptions] = useState<FHComboItem[]>([]);
    const [serviceList, setserviceList] = useState<MultiSelectOption[]>([]);

    return (
        <>
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
                <div className=" lg:col-span-3">
                    <Card>
                        <CardHeader>
                            <CardTitle>Service</CardTitle>
                            <CardDescription>Choose services</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="grid gri-col-1 space-y-4">
                                <div className="">
                                    <Label>Types</Label>
                                    <MultiSelect
                                        name="service_types"
                                        options={serviceList}
                                        onValueChange={setSelectedServiceTypes}
                                        defaultValue={[]}
                                        placeholder="Select service types"
                                        variant="inverted"
                                        maxCount={3}
                                        disabled={!selectedCategory}
                                    />
                                </div>
                            </div>
                        </CardContent>
                        <CardFooter>
                            <Button
                                type="button"
                                onClick={() => {
                                    append({
                                        service_id: selectedCategory,
                                        service_material_id: selectedMaterial,
                                        service_types:
                                            selectedServiceTypes.map(Number),
                                        charge: "0.00",
                                        discount: "0.00",
                                        gross_amount: "0.00",
                                        vat: "0.00",
                                        net_amount: "0.00",
                                    });
                                }}
                            >
                                <CirclePlus className="2-4 h-4 mr-1" /> Add
                                Service
                            </Button>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </>
    );
};

export default ServiceDetailForm;

[seadawy]

React.useEffect(() => {
            if (
                !defaultValue ||
                defaultValue.length === 0 ||
                (defaultValue.length === 1 && defaultValue[0] === "")
            ) {
                if (selectedValues.length > 0) {
                    handleClear();
                }
            } else if (
                JSON.stringify(selectedValues) !==
                JSON.stringify(defaultValue.filter((v) => v !== ""))
            ) {
                setSelectedValues(defaultValue.filter((v) => v !== ""));
            }
        }, [defaultValue]);

try this