fix: add type button to v-calendar navigations to prevent form submis…

…sion (#461)
unovue · Apr 4, 2024 · cb955c8 · cb955c8
1 parent 0c3c703
commit cb955c8
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -79,10 +79,10 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
         <ChevronLeft class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
         <ChevronRight class="w-4 h-4" />
       </button>
     </div>

diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
         <ChevronLeftIcon class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
         <ChevronRightIcon class="w-4 h-4" />
       </button>
     </div>