Non submit Button in Sheet still triggers onSubmit handler in React Hook Form implementation

[jschuur]

I have a Sheet component that contains a Form and two Buttons: one is of type='submit' to submit the form and one simply contains an onClick handler to reset the form, but keep the Sheet open. However, the reset button also triggers the onSubmit handler, in addition to the onClick handler.

Here's where they're used:

<Button variant='outline' onClick={resetForm}>
   Reset filters
</Button>
<SheetClose asChild>
  <Button type='submit'>Apply filter</Button>
</SheetClose>

Is this a problem with my implementation? How can I tell in the onSubmit handler what triggered it, so I can ignore some cases? I've looked at the event data passed as the second argument to that handler, but it didn't seem to contain distinguishing details.

I used the shadcn UI form documentation as a basis for this.

The page in its entirety:

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { Filter } from 'lucide-react';
import { useForm } from 'react-hook-form';
import z from 'zod';

import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';

const filterSchema = z.object({
  name: z.string().optional(),
  size: z.enum(['small', 'medium', 'large', 'extra large', 'none', '']).optional(),
  color: z.string().optional(),
});

export type FilterSchema = z.infer<typeof filterSchema>;

export default function ItemFilter() {
  const form = useForm<z.infer<typeof filterSchema>>({
    resolver: zodResolver(filterSchema),
    defaultValues: {},
  });

  function onSubmit(values: z.infer<typeof filterSchema>) {
    console.log('onSubmit triggered');
  }

  function resetForm() {
    console.log('resetForm triggered');
  }

  return (
    <Sheet>
      <div className='flex flex-row w-full items-center justify-end text-sm'>
        <SheetTrigger asChild>
          <Button variant='ghost'>
            <Filter size={24} />
          </Button>
        </SheetTrigger>
      </div>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Filter list</SheetTitle>
          <SheetDescription>By size, color, and more.</SheetDescription>
        </SheetHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
            <FormField
              control={form.control}
              name='name'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input className='' data-1p-ignore {...field} />
                  </FormControl>
                </FormItem>
              )}
            />
            <FormMessage />
            <div className='flex flex-row items-end justify-end space-x-4'>
              <Button variant='outline' onClick={resetForm}>
                Reset filters
              </Button>
              <SheetClose asChild>
                <Button type='submit'>Apply filter</Button>
              </SheetClose>
            </div>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}

[jschuur]

FWIW, even if I remove the onClick handler from the reset Button, my onSubmit handler is still called.

This also still happens if I replace the shadcn UI Button component with a vanilla <button>reset</button>

[jschuur]

Looks like explicitly marking the reset button as type='button' solves this

<Button variant='outline' type='button' onClick={resetForm}>
   Reset filters
</Button>