Mouse Event Propagation in SvelteUI

My Svelte app (SvelteUI) displays a series of elements in grid rows. When you click on a row, it expands using the CSS display property. Some rows have controls that are visible whether or not the row is expanded -- buttons, sliders, etc. The issue arises when a mousedown occurs on a control and mouseup occurs outside the control (clicking on a button and releasing outside the button). The button properly ignores the event, but the event causes the containing row to expand/collapse (which I don't want). I know this is a common issue with mouse events, but with SvelteUI there is a wrinkle because of the way it handles click events. This is also exacerbated by the structure of the app. If someone can point me to a dup that actually has an answer that works, I will happily delete this question.

An MRE is tough because of the size of the proprietary project, but here's the gist.

buttonGroup.svelte

<script lang='ts'>    import {Button, Group} from '@svelteuidev/core';  // SvelteUI `<Button>` not html `<button>`</script><div><Group><Button on:click={() => {"do stuff"}>            My Button</Button></Group></div>

objectRows.svelte

<script lang='ts'>  import Grid from '@svelteuidev/core';  import buttonGroup from "./buttonGroup.svelte";  import anotherGroup from "./anotherGroup.svelte";  function toggleVisibility() {    if (myElement.style.display === '') {      myElement.style.display = 'none';    } else {      myElement.style.display = '';    }  }</script><div><Grid><div id="list" on:click={() => {toggleVisibility(); open = !open}} on:keydown={() => ""}><Grid.Col>            Stuff</Grid.Col><Grid.Col><div id="controls"><div class="button-group"><buttonGroup bind:deviceStore bind:objectStore /></div><div class="another-group"><anotherGroup bind:deviceStore bind:objectStore /></div>                ...</div></Grid.Col></Grid></div>

So when I click on My Button and drag out before release, it toggles visibility of id list.

What I've Tried

• Stop Propagation:SvelteUI does not honor stopPropagation when you try to use it on SvelteUI components -- on:click|stopPropagation -- doesn't work, so I tried wrapping the Button in a div and tried to capture and stop propagation there. That didn't work either.

• Handling Mouse Events:I've tried adding a series of mouse event handlers to successive divs up the food chain. Didn't work.

• Ignoring Mouse Events:I've tried adding dummy functions to mouse events to have them go nowhere like on:mouseup={() => {}}. Didn't work.

What I Think is Happening

I think the enclosing grid row is seeing the release event as a unique click event which is causing the visibility prop to toggle.

What I Want to Happen

I want to stop the mouse release event from causing

• the parent grid row from expanding unless the mouse event originated there. Or,
• anything to happen unless the mouse release event occurs within the button (control) SvelteUI component.