Divs with on:click events prevent form submission

[Elsoberanold]

In my current project, I've been building several UI components, including a dropdown menu. My code has worked as expected until I tried to use forms with it. Consider the following files:

App.svelte

<script>
	import Dropdown from "./Dropdown.svelte";
	let id;
	
	function handleSubmit() {
		alert(`Send ${id}`);
	}
</script>

<Dropdown>
	<svelte:fragment slot="icon">
		Icon
	</svelte:fragment>
	<form on:submit|preventDefault={handleSubmit}>
			<input type="hidden" name="id" bind:value={id}/>
			<button type="submit" on:click={()=>console.log("clicked")}> Submit </button>
	</form>
</Dropdown>

Base.svelte

<script>
	export let open = false;

	export function handleOpen() {
        open = !open
    }
</script>

<div class="relative">
	<slot name="button"/>
	{#if open}
		<div on:click={()=>{open = !open}}>
			<slot/>
		</div>
	{/if}
</div>

<style>
	.base {
		position: relative
	}
</style>

Dropdown.svelte

<script>
	import Base from "./Base.svelte"
	export let open = false;

	export function handleOpen() {
	  open = !open
  }
</script>

<Base {open}>
	<svelte:fragment slot="button">
		<button type="button" on:click={handleOpen}>
			<slot name="icon"/>
		</button>
	</svelte:fragment>

		<slot/>
</Base>

When the submit button is clicked, only its on:click event is triggered and console will log "clicked". But if I remove the on:click event from the div on this line <div on:click={()=>{open = !open}}> from Base.svelte file it trigger both form submission and on:click method of corresponding button. I don't know if this is normal behavior or a bug, so that I did't raised an issue.

[david-plugge]

The click Event fires before the submit Event. In that case your dropdown closes and the Form is removed from the dom. Try to add on:click|stopPropagation to the submit button.
And also, does clicking in the Input also close the dropdown? I suggest passing down a close function using a slot prop to explicitly close the dropdown.

[Elsoberanold]

Thank you by your response! The use of on:click|stopPropagation works but defeat the purpose of the on:click method on the div... I intent to close the dropdown as soon as some of button inside it is clicked. Passing a close function as a slot prop seams to be a a clean solution. I have tried to to implement it, but I couldn't get it to close the dropdown... Here is what I've tried to do.

[david-plugge]

Close ist Not available in the function scope in your example. Its only available in the subtree of where you specify let:close. One solution is to pass it to the submit handler.

[david-plugge]

Id love to provide an example, but im not at my PC for the next few days

[Elsoberanold]

Oh I get it!

<script>
	import Dropdown from "./Dropdown.svelte";
	let id;
	
	function handleSubmit(action) {
		alert(`Send ${id}`);
		action();
	}
</script>

<Dropdown let:close>
	<svelte:fragment slot="icon">
		Icon
	</svelte:fragment>
	<form on:submit|preventDefault={handleSubmit(close)}>
			<input type="hidden" name="id" bind:value={id}/>
			<button type="submit" on:click={()=>console.log("clicked")}> Submit </button>
	</form>
</Dropdown>

Now it's working! Thank you!