[bug]: Carousel refreshes a page when it's inside a form

[alamenai]

Describe the bug

When this Carousel component is placed inside a form element, it causes the entire page to refresh.

Problem Summary:

1. Component Involved: Carousel from Shadcn UI library.
2. Context: When the Carousel is placed inside a form.
3. Observed Behavior: The entire page refreshes.

ba831df9-d410-4952-9e89-bf5edf4e9305.webm

Affected component/components

Carousel

How to reproduce

ba831df9-d410-4952-9e89-bf5edf4e9305.webm

Code

<FormItem className='w-full items-baseline'>
                            <FormControl>
                              <Input
                                id='electricity-annual-consumption'
                                className='h-11'
                                placeholder='Geben Sie Ihren Strombedarf ein'
                                {...field}
                                onChange={(event) => {
                                  const { value } = event.target
                                  if (/^\d*$/.test(value)) {
                                    field.onChange(value)
                                  }
                                }}
                              />
                            </FormControl>
                            <FormMessage />

                            <div>
                              <Carousel
                                opts={{
                                  align: "start",
                                }}
                                className='w-full max-w-sm'
                              >
                                <CarouselContent>
                                  {Array.from({ length: 5 }).map((_, index) => (
                                    <CarouselItem key={index} className='md:basis-1/2 lg:basis-1/3'>
                                      <div className='p-1'>
                                        <Card>
                                          <CardContent className='flex aspect-square items-center justify-center p-6'>
                                            <span className='text-3xl font-semibold'>{index + 1}</span>
                                          </CardContent>
                                        </Card>
                                      </div>
                                    </CarouselItem>
                                  ))}
                                </CarouselContent>
                                <CarouselPrevious />
                                <CarouselNext />
                              </Carousel>
                            </div>
                            <Button
                              disabled={!isElectricityConsumptionValid(parseInt(value, 10))}
                              variant='ghost'
                              className='text-blue-500 hover:text-blue-600 w-full'
                              onClick={() => setIsElectrictyDemandEditable(false)}
                            >
                              Speichern
                            </Button>
                          </FormItem>

Codesandbox/StackBlitz link

https://jam.dev/c/7429742c-aff6-4f54-8438-d1b00e55f069

Logs

No response

System Info

OS: Linux
Browser: Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[alamenai]

It's resolved by adding onClick={(e) => e.preventDefault()} to the Carousel component.