Fetcher behaviour when used conditionally in a modal

[discoverlance-com]

I am using fetcher in a datatable to render a delete modal when the user selects items in the table. The delete button to trigger the modal only shows up after the items in the datatable has been selected.

I am then using fetcher in the modal to create a post request to another route (resource route with only an action) where I return data with a different status and error messages.

For some reason, the form does not use fetcher but does a full page reload or full page form submission and then after the submission, it also redirects me to the resource action page which has no component to render as it's only purpose is to export an action that can be used by the fetcher.

Since I am using fetcher.Form, I only specify the action in the form to be a different route. I am still not sure why it uses a full browser reload (the favicon spins) to submit the form and also redirects to the action or makes a get request to it afterwards.

This is my dialog/use of fetcher:

... // imports here

// imports here

export function DeleteEmployeesDialog({
  employees,
  showTrigger = true,
  onSuccess,
  ...props
}: DeleteEmployeeDialogProps) {
  const formAction = siteLinks.dashboard.employees.destroy;

  const { form, isDeleting, fetcher } = useDeleteEmployees({
    onSuccess,
    onClose: () => props.onOpenChange?.(false),
  });

  return (
    <Dialog {...props}>
      {showTrigger ? (
        <DialogTrigger asChild>
          <Button variant="outline" size="sm">
            <Trash className="mr-2 size-4" aria-hidden="true" />
            Delete ({employees.length})
          </Button>
        </DialogTrigger>
      ) : null}
      <DialogContent>
        <DialogHeader>...</DialogHeader>
        <DialogFooter className="gap-2 sm:space-x-0">
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <fetcher.Form
            method="POST"
            {...getFormProps(form)}
            action={formAction}
          >
            {employees.map((employee) => (
              <input
                key={employee.id}
                type="hidden"
                name="ids"
                value={employee.id}
              />
            ))}
            <Button
              aria-label="Delete selected rows"
              variant="destructive"
              type="submit"
              disabled={isDeleting}
            >
              {isDeleting && (
                <Loader
                  className="mr-2 size-4 animate-spin"
                  aria-hidden="true"
                />
              )}
              Delete
            </Button>
          </fetcher.Form>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

And this is my hook where I use fetcher:

import { useForm } from '@conform-to/react'
import { parseWithZod } from '@conform-to/zod'
import { useEffect } from 'react'
import { useFetcher } from 'react-router'
import { toast } from 'sonner'

import { siteLinks } from '@/config/site'
import { deleteEmployeeActionSchema } from '@/routes/app.employees.destroy/route'

import { Info } from '../../app.employees.destroy/+types/route'

interface UseDeleteEmployeesOptions {
	onSuccess?: () => void
	onClose?: () => void
}

export function useDeleteEmployees({
	onSuccess,
	onClose,
}: UseDeleteEmployeesOptions) {
	const fetcher = useFetcher<Info['actionData']>({ key: 'delete-employees' })
	const formAction = siteLinks.dashboard.employees.destroy

	const isDeleting =
		fetcher.state !== 'idle' && fetcher.formAction === formAction

	const [form] = useForm({
		id: `delete-employees-form`,
		lastResult: fetcher.state === 'idle' ? fetcher.data?.result : null,
		onValidate({ formData }) {
			return parseWithZod(formData, { schema: deleteEmployeeActionSchema })
		},
		shouldValidate: 'onSubmit',
	})

	useEffect(() => {
		if (form.status === 'success') {
			form.reset()
			onClose?.()
			toast.success('Employee(s) deleted')
			onSuccess?.()
		}
		if (form.status === 'error') {
			toast.error(form.errors?.[0])
		}
	}, [form.status, form.errors, onClose, onSuccess])

	return {
		form,
		isDeleting,
		fetcher,
	}
}

And this is my action

import { parseWithZod } from '@conform-to/zod'
import { data } from 'react-router'
import { z } from 'zod'

import { Route } from './+types/route'

export const deleteEmployeeActionSchema = z.object({
	ids: z.array(
		z.string({
			required_error: 'Employee to delete is required',
			invalid_type_error: 'Employee to delete is required',
		}),
		{
			required_error: 'Employees to delete are required',
			invalid_type_error: 'Employees to delete are required',
		},
	),
})

export const action = async ({ request }: Route.ActionArgs) => {
	await requireAuthentication(request)

	const formData = await request.formData()
	const submission = parseWithZod(formData, {
		schema: deleteEmployeeActionSchema,
	})

	if (submission.status !== 'success') {
		return data(
			{ result: submission.reply() },
			{ status: submission.status === 'error' ? 422 : 200 },
		)
	}

	const { ids } = submission.value
	try {
		await deleteEmployees(request, ids)
	} catch (error) {
		console.error(error)
		return data(
			{
				result: submission.reply({
					formErrors: ['Failed to delete employee(s). Please try again.'],
				}),
			},
			{ status: 500 },
		)
	}

	return data({ result: submission.reply() })
}

Does anyone have an idea as to why this is happening?