fix(DatePicker): fix auto submit when wrapped in form

N00nDay · Sep 26, 2023 · 3814dc7 · 3814dc7
1 parent 8cf181e
commit 3814dc7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/lib/components/datepicker/DateInput.svelte b/src/lib/components/datepicker/DateInput.svelte
@@ -189,6 +189,7 @@
 
 					{#if allowClear && value}
 						<button
+							type="button"
 							aria-label="clear"
 							on:click={handleClear}
 							class="absolute inset-y-0 group-focus-within:flex active:flex items-center"
@@ -307,6 +308,7 @@
 
 			{#if allowClear && value}
 				<button
+					type="button"
 					aria-label="clear"
 					on:click={handleClear}
 					class="absolute inset-y-0 group-focus-within:flex active:flex items-center"

diff --git a/src/lib/components/datepicker/DatePicker.svelte b/src/lib/components/datepicker/DatePicker.svelte
@@ -296,6 +296,7 @@
 	>
 		<div class="h-14 px-3 py-2 flex items-center w-full">
 			<Button
+				htmlType="button"
 				ariaLabel="previous year"
 				size="xs"
 				shape="circle"
@@ -316,6 +317,7 @@
 				</svg>
 			</Button>
 			<Button
+				htmlType="button"
 				ariaLabel="previous month"
 				size="xs"
 				shape="circle"
@@ -342,6 +344,7 @@
 				<!-- {/key} -->
 			</div>
 			<Button
+				htmlType="button"
 				ariaLabel="next month"
 				size="xs"
 				shape="circle"
@@ -360,6 +363,7 @@
 				</svg>
 			</Button>
 			<Button
+				htmlType="button"
 				ariaLabel="next month"
 				size="xs"
 				shape="circle"
@@ -421,6 +425,7 @@
 											</span>
 										{:else}
 											<button
+												type="button"
 												aria-label="{iLocale.months[
 													browseDate.month()
 												]} {calendarDay.date()} {browseDate.year()} "
@@ -493,6 +498,7 @@
 			>
 				{#each actions as action}
 					<Button
+						htmlType="button"
 						size="sm"
 						type="primary"
 						shape="pill"
@@ -504,9 +510,13 @@
 		{/if}
 		{#if showTime || !closeOnSelect}
 			<div class="p-3 gap-3 flex items-center justify-evenly w-full border-t border-border">
-				<Button class="w-full bg-default text-default-content" on:click={handleCancel}>Clear</Button
+				<Button
+					htmlType="button"
+					class="w-full bg-default text-default-content"
+					on:click={handleCancel}>Clear</Button
+				>
+				<Button htmlType="button" type="primary" class="w-full" on:click={handleApply}>Apply</Button
 				>
-				<Button type="primary" class="w-full" on:click={handleApply}>Apply</Button>
 			</div>
 		{/if}
 	</div>